msyndra 2014-05-08
目前我还没发现Jquery-Easyui自带DataGrid自适应窗口的功能,因此简单写了一个实现方法,与网友们分享,也希望能够帮助有需要的朋友。
下面是我基于JQuery做的一个实现:
Js代码 收藏代码 /** * JQuery扩展方法,用户对JQuery EasyUI的DataGrid控件进行操作。 */ $.fn.extend({ /** * 修改DataGrid对象的默认大小,以适应页面宽度。 * * @param heightMargin * 高度对页内边距的距离。 * @param widthMargin * 宽度对页内边距的距离。 * @param minHeight * 最小高度。 * @param minWidth * 最小宽度。 * */ 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; $(this).datagrid('resize', { height : height, width : width }); } });
使用方法: Js代码 收藏代码 $(function() { var datagridId = 'userDataGrid'; // 其他代码 // 第一次加载时自动变化大小 $('#' + datagridId).resizeDataGrid(20, 20, 300, 600); // 当窗口大小发生变化时,调整DataGrid的大小 $(window).resize(function() { $('#' + datagridId).resizeDataGrid(20, 20, 300, 600); }); });
在此补充一下,由于IE6下JS的执行效率很低,因此在让DataGrid自适应页面大小变化的时候,请将DataGrid的fitColumns属性设置为false,否则改变页面大小会导致IE出现一定时间的停顿。设置方法为:
$('#' + datagridId).datagrid({
title: '用户类型',
url: 'userType.json',
fitColumns: false,
.......