EasyUI datagrid自适应问题解决
2024-09-23 10:02:44
在使用js 动态创建EasyUI datagrid时,如果设置fit为true,在显示的时候数据的高度为固定高度不能自适应
解决办法是把fit设为false。
但这样设置后又有个问题,如果把columns定义在js里面,及时宽度设置为百分百,单元格的宽度不能随着浏览器的大小而变化
解决办法是把columns定义在页面html里。
最后的代码如下:
html代码
<table id="grid" title="考勤数据" style="width:100%;height:auto">
<thead>
<tr>
<th field="GUID" hidden="hidden">ID</th>
<th field="EmpName" width="20%">姓名</th>
<th field="KqDate" width="20%">日期</th>
<th field="KqTime" width="20%">时间</th>
<th field="IsInvalid" width="16%">是否有效</th>
<th field="Remark" width="20%">备注</th>
</tr>
</thead>
</table>
js代码
$('#grid').datagrid({
url: '/Checking/GetAll?r=' + Math.random(), //数据接收URL地址
iconCls: 'icon-view', //图标
fit: false, //自动适屏功能
nowrap: true,
autoRowHeight: false, //自动行高
autoRowWidth: true,
striped: true,
collapsible: false,
remoteSort: true,
idField: 'GUID', //主键值
pagination: true, //启用分页
rownumbers: true, //显示行号
multiSort: true, //启用排序
sortable: true, //启用排序列
fitcolumns: true,
queryParams: $("#searchform").form2json(), //搜索条件查询
singleSelect: true,
/*columns: [[
{ field: 'GUID', hidden: true },
{ field: 'EmpName', title: '姓名', width: '20%', sortable: true },
{ field: 'KqDate', title: '日期', width: '20%', sortable: true },
{ field: 'KqTime', title: '时间', width: '20%', sortable: true },
{ field: 'IsInvalid', title: '有效否', width: '16%', sortable: true },
{ field: 'Remark', title: '备注', width: '20%' }
]],*/
toolbar: '#divtoolbar'
});
}
最新文章
- 【转】如何提高意志力&;如何坚持每天学习
- golang学习之旅:方法、函数使用心得
- Java反射深入浅出(一)
- tophat cufflinks cuffcompare cuffmerge 的使用
- UIImageView的图片居中问题
- UVA 1401 - Remember the Word(Trie+DP)
- VS2013以管理员身份使用
- UNIX 网络编程知识,函数积累
- malloc函数及用法
- 大数运算的算法设计和C++实现
- Konckout第三个实例:循环绑定 -- table列表数据的填充
- L362 When to Bring up Salary During the Job Interview Process
- Web前端:博客美化:四、网易云音乐单曲播放器
- chrome 下 input[file] 元素cursor设置pointer不生效的解决
- c++ __declspec
- python tkinter-消息框、对话框、文件对话框
- 运行程序,解读this指向---case6
- Hadoop学习之路(二十四)YARN的资源调度
- 第一百八十八节,jQuery,选项卡 UI
- ie6 ie7下报脚本错误";Expected identifier, string or number"; 的原因和解决方法
热门文章
- ORA-00911 :无效字符
- Spring中的实例生成方式及其生命周期
- 如何修改linux系统主机名称
- Armitage初始化
- 摄像头(2)调用系统拍照activity来录像
- LINUX Find命令使用
- python中的commands模块,执行出错:&#39;{&#39; 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- poj 2185 (KMP)
- MyEclipse/Eclipse导入sun.misc.BASE64Encoder jar包步骤
- jwplayer 网页在线播放插件