首页 > 代码库 > EasyUI datagrid自适应问题解决

EasyUI datagrid自适应问题解决

2024-07-22 00:51:38   218人阅读

在使用js 动态创建EasyUI datagrid时，如果设置fit为true，在显示的时候数据的高度为固定高度不能自适应

解决办法是把fit设为false。

但这样设置后又有个问题，如果把columns定义在js里面，及时宽度设置为百分百，单元格的宽度不能随着浏览器的大小而变化

解决办法是把columns定义在页面html上。

最后的代码如下：

html代码

 1 <table id="grid" title="考勤数据" style="width:100%;height:auto"> 2       <thead> 3            <tr> 4                <th field="GUID" hidden="hidden">ID</th> 5                <th field="EmpName" width="20%">姓名</th> 6                <th field="KqDate" width="20%">日期</th> 7                <th field="KqTime" width="20%">时间</th> 8                <th field="IsInvalid" width="16%">是否有效</th> 9                <th field="Remark" width="20%">备注</th>10            </tr>11       </thead>12 </table>

js代码

 1  $(‘#grid‘).datagrid({ 2         url: ‘/Checking/GetAll?r=‘ + Math.random(), //数据接收URL地址 3         iconCls: ‘icon-view‘, //图标 4         fit: false, //自动适屏功能 5         nowrap: true, 6         autoRowHeight: false, //自动行高 7         autoRowWidth: true, 8         striped: true, 9         collapsible: false,10         remoteSort: true,11         idField: ‘GUID‘, //主键值12         pagination: true, //启用分页13         rownumbers: true, //显示行号14         multiSort: true, //启用排序15         sortable: true, //启用排序列16         fitcolumns: true,17         queryParams: $("#searchform").form2json(), //搜索条件查询18         singleSelect: true,19         /*columns: [[20             { field: ‘GUID‘, hidden: true },21             { field: ‘EmpName‘, title: ‘姓名‘, width: ‘20%‘, sortable: true },22             { field: ‘KqDate‘, title: ‘日期‘, width: ‘20%‘, sortable: true },23             { field: ‘KqTime‘, title: ‘时间‘, width: ‘20%‘, sortable: true },24             { field: ‘IsInvalid‘, title: ‘有效否‘, width: ‘16%‘, sortable: true },25             { field: ‘Remark‘, title: ‘备注‘, width: ‘20%‘ }26         ]],*/27         toolbar: ‘#divtoolbar‘28     });29 }

 

EasyUI datagrid自适应问题解决


联系
我们