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

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 帮我调试idea基于spring boot项目
  • ¥15 es 7.17.20版本生成时间戳
  • ¥15 wpf dategrid表头排序图标自定义
  • ¥15 分析下图所示同步时序逻辑电路的逻辑功能。
  • ¥15 halcon联合c#遇到了问题不能解决
  • ¥15 xshell无法连接提示ssh服务器拒绝密码
  • ¥15 AT89C52单片机C语言关于串口通信的位操作
  • ¥20 需要步骤截图(标签-服务器|关键词-map)
  • ¥50 gki vendor hook
  • ¥15 灰狼算法和蚁群算法如何结合