Easyui datagrid 高度自适应的解决办法
当 table 在 div 中,如果此时设置fit 为 true时,datagrid会没有高度,且不会随窗体改变而改变
如:
<div>
<table id="list" style="width:100%"></table>
</div>
$(function () {
initTable();
});
function initTable() {
var flag = false;
$('#list').datagrid({
url: '/TB_Logs/GetList',
method: 'get',
idField: 'ID',
fit:true,
fitColumns: true,//自适应宽度
singleSelect: true,//是否单选
rownumbers: true,//行号
解决办法:
- 一种是 div 添加 fit:true
- 一种是自己写js
js 实现方式:
$(function () {
initTable();
initGridHeight('#list');
});
function initGridHeight(obj) {
if (obj != null) {
$(window).on("resize", function () {
try {
var win_h = $(window).height();
var height = Math.floor(win_h * 0.95);
var options = $(obj).datagrid('options');
if (options != null) {
if (options.fit) {
$(obj).parents("div.datagrid-wrap:first").css({
height: height + 'px'
});
$(obj).datagrid("resize");
}
}
} catch (e) {
return false;
}
}).trigger("resize");
}
}
这样就可以跟随屏幕大小变化而变化了!