easy-ui高度设置,在浏览器窗口改变时,自适应设置。
/** * JQuery扩展方法,用户对JQuery EasyUI的DataGrid控件进行操作。 */ $.fn.extend({ /** * 修改DataGrid对象的默认大小,以适应页面宽度。 * * @param heightMargin * 高度对页内边距的距离。 * @param widthMargin * 宽度对页内边距的距离。 * @param minHeight * 最小高度。 * @param minWidth * 最小宽度。 * */ resizeDataGrid: function (heightMargin, widthMargin, minHeight, minWidth) { var height = $(window).height() - heightMargin; var width = $(window).width() - widthMargin; height = height < minHeight ? minHeight : height; width = width < minWidth ? minWidth : width; $(this).datagrid('resize', { height: height, width: width }); } });
$(document).ready(function () { //newSetDivHeight("tabList"); // 第一次加载时自动变化大小 $('#tabList').resizeDataGrid(100,100, 300, 600); // 当窗口大小发生变化时,调整DataGrid的大小 $(window).resize(function () { $('#tabList').resizeDataGrid(100, 100, 300, 600); }); });
<table id="tabList" class="easyui-datagrid" style="width:900px;" pagination="false" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th data-options="field:'sCustomerName',width:80,align:'center'">客户姓名</th> <th data-options="field:'sMoblie',width:100,align:'center'">手机号码</th>