JQuery Easy UI —— 如何让DataGrid自适应页面宽度

DataGrid能够自适应页面大小变化，基于JQuery做的一个实现：
/**

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  
 });  
```
}
});

使用方法：
$(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 Easy UI —— 如何让DataGrid自适应页面宽度

猜你喜欢