2 h723836333 h723836333 于 2013.08.29 12:09 提问

jquery easyui 1.3.4 的datagrid无法自适应高度和宽度,
 <div class="easyui-tabs" fit="true" border="false">

        <div title="用户管理" border="false">
        <!--  -->
                <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>
</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(){

}

1个回答

showbo
showbo   Ds   Rxr 2015.10.21 16:52

用easyui的layout来进行布局。。看\examples\layout里面的示例

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!