opq8976712 2013-08-29 04:11 采纳率: 50%
浏览 22945
已采纳

jquery easyui 1.3.4 的datagrid无法自适应高度和宽度,

            <div id="searchpanel" class="easyui-panel" border="false" title="查询条件"
                    style="height: 100px;"
                    data-options="iconCls:'icon-search', collapsible:true">
                    <table class="tableForm datagrid-toolbar"
                            style="width: 100%; height: 100%;">
                            <tr>
                                    <th>
                                            用户名
                                    </th>
                                    <td>
                                            <input name="userName" style="width: 155px" />
                                    </td>
                                    <th>
                                            联系电话
                                    </th>
                                    <td>
                                            <input name="phone" style="width: 155px" />
                                    </td>
                                    <th>
                                            所属单位
                                    </th>
                                    <td>
                                            <input name="phone" style="width: 155px" />
                                    </td>

                            </tr>
                            <tr>
                                    <th>
                                            开始日期
                                    </th>
                                    <td>
                                            <input name="timeStart" editable="flase"
                                                    class="easyui-datetimebox" style="width: 155px" />
                                    </td>
                                    <th>
                                            结束日期
                                    </th>
                                    <td>
                                            <input name="timeEnd" editable="flase" class="easyui-datetimebox"
                                                    style="width: 155px" />

                                    </td>
                                    <th></th>
                                    <td>
                                            <a href="#" class="easyui-linkbutton">查询</a>
                                            <a href="#" class="easyui-linkbutton">清空</a>
                                    </td>

                            </tr>
                    </table>


            </div>

            <table id="centerDateGrid">
                    <thead>
                            <tr>

                                    <th field="userId" width="80" sortable="true">
                                            userId
                                    </th>
                                    <th field="loginName" width="100" sortable="true">
                                            loginName
                                    </th>
                                    <th field="userName" width="80" sortable="true">
                                            userName
                                    </th>
                                    <th field="password" width="80" align="right" sortable="true">
                                            password
                                    </th>
                                    <th field="cell" width="80" align="right" sortable="true">
                                            cell
                                    </th>
                                    <th field="qq" width="100" align="right" sortable="true">
                                            qq
                                    </th>
                                    <th field="mail" width="110" sortable="true">
                                            mail
                                    </th>

                            </tr>
                    </thead>
            </table>


    </div>


-->
这是我的center里面的代码

下面是我的js代码:

$(function() {
alert("进来了");
//初始化查询pannel

    // 初始化右下角的提示框
    $.messager.show({
            title : '我的消息',
            msg : '登录成功,欢迎使用此系统',
            timeout : 3000,
            showType : 'slide'
    });
    // 初始化datagrid
    $("#centerDateGrid").datagrid({
            url : 'login/users!findList.action',
            height:"200px;",
            iconCls : 'icon-save',// 图标
            rownumbers : true,// 如果为true,则显示一个行号列。
            singleSelect : true,// 如果为true,则只允许选择一行。
            // autoRowHeight:false,//定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。
            nowrap : false,// 如果为true,则在同一行中显示数据。设置为true可以提高加载性能。
            pagination : true,// 显示分页工具条
            pageSize : 20,// 每页条数
            fit : true,// datagrid自适应宽高
            fitColumns : true,// 使列自动展开/收缩到合适的数据表格宽度。
            idField : 'userId',
            sortName : 'userId',// 定义哪些列可以进行排序
            sortOrder : 'asc',// 定义列的排序顺序,只能是'asc'或'desc'
            border : false,
            pageList : [ 20, 30, 40, 50 ],// 分页条数选择
            toolbar : [ {
                    text : '添加',
                    iconCls : 'icon-add',
                    hander : function() {

                    }
            },'-', {
                    text : '修改',
                    iconCls : 'icon-edit',
                    hander : function() {

                    }

            },'-', {
                    text : '删除',
                    iconCls : 'icon-remove',
                    hander : function() {

                    }

            } ]
            //toolbar:"#toolbar"

    });

});

//查询条件
function search(){

    $("#centerDateGrid").datagrid("load",{
            userName("#userName").val()
    });

}
//清空查询条件
function clear(){

}

  • 写回答

11条回答

  • 落花雨-- 2014-12-24 06:06
    关注

    table不要设高度,fit:true;fitColumns : true;

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(10条)

报告相同问题?

悬赏问题

  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥200 关于#c++#的问题,请各位专家解答!网站的邀请码
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号