最近因为datagrid的宽度问题,结果被提BUG了,郁闷·····
产生问题的背景:
其实就是在页面显示的某一列的字数比较长或者特别长的时候,页面无法一次性显示完毕所有的字,所以特地看了一下自适应宽度,有3个就显示3个字宽度,有7个就显示7个字的宽度···比较灵活!
废话不多说,直接码代码:
//easyui的datagrid宽度自适应扩展方法
$.fn.extend({
resizeDataGrid : function(heightMargin, widthMargin, minHeight, minWidth) {
var height = $(document.body).height() - heightMargin;
var width = $(document.body).width() - widthMargin;
height = height < minHeight ? minHeight : height;
width = width < minWidth ? minWidth : width;
$('#wiserecordloandg').datagrid('resize', {
height : height,
width : width
});
}
});
$(function() {
// datagrid数据表格ID
var datagridId = 'wiserecordloandg';
// 第一次加载时自动变化大小
$('#' + datagridId).resizeDataGrid(0, 0, 0, 0);
// 当窗口大小发生变化时,调整DataGrid的大小
$(window).resize(function() {
$('#' + datagridId).resizeDataGrid(0, 0, 0, 0);
});
});
注意事项:
1)代码直接粘贴,就可用,需要修改的是:table的id:wiserecordloandg,改成你自己的id就可以了;
2)假如以上的代码之后,你想要自适应的列,都不需要再手动的设置width和height;否则,自适应无效;
效果图一:
效果图二:
此刻,完成宽度自适应的优化;