jQuery dategrid自适应宽度

浏览数：23 / 时间：2015年06月09日

我想正在用JQuery Easy UI的朋友一定很希望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,
        .......

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery dategrid自适应宽度