jQuery dategrid自适应宽度

标签：style   http   color   io   使用   ar   strong   art   div   

我想正在用JQuery Easy UI的朋友一定很希望DataGrid能够自适应页面大小变化，目前我还没发现其自带此功能，因此简单写了一个实现方法，与网友们分享，也希望能够帮助有需要的朋友。

下面是我基于JQuery做的一个实现：

Js代码  

1. /** 
2.  * JQuery扩展方法，用户对JQuery EasyUI的DataGrid控件进行操作。 
3.  */  
4. $.fn.extend({  
5.     /** 
6.      * 修改DataGrid对象的默认大小，以适应页面宽度。 
7.      *  
8.      * @param heightMargin 
9.      *            高度对页内边距的距离。 
10.      * @param widthMargin 
11.      *            宽度对页内边距的距离。 
12.      * @param minHeight 
13.      *            最小高度。 
14.      * @param minWidth 
15.      *            最小宽度。 
16.      *  
17.      */  
18.     resizeDataGrid : function(heightMargin, widthMargin, minHeight, minWidth) {  
19.         var height = $(document.body).height() - heightMargin;  
20.         var width = $(document.body).width() - widthMargin;  
21.   
22.         height = height < minHeight ? minHeight : height;  
23.         width = width < minWidth ? minWidth : width;  
24.   
25.         $(this).datagrid(‘resize‘, {  
26.             height : height,  
27.             width : width  
28.         });  
29.     }  
30. });  

使用方法：

Js代码  

1. $(function() {  
2.     var datagridId = ‘userDataGrid‘;  
3.   
4.     // 其他代码  
5.   
6.     // 第一次加载时自动变化大小  
7.     $(‘#‘ + datagridId).resizeDataGrid(20, 20, 300, 600);  
8.   
9.     // 当窗口大小发生变化时，调整DataGrid的大小  
10.     $(window).resize(function() {  
11.         $(‘#‘ + datagridId).resizeDataGrid(20, 20, 300, 600);  
12.     });  
13. });  

在此补充一下，由于IE6下JS的执行效率很低，因此在让DataGrid自适应页面大小变化的时候，请将DataGrid的fitColumns属性设置为false，否则改变页面大小会导致IE出现一定时间的停顿。设置方法为：

    $(‘#‘ + datagridId).datagrid({
        title: ‘用户类型‘,
        url: ‘userType.json‘,
        fitColumns: false,
        .......

jQuery dategrid自适应宽度

标签：style   http   color   io   使用   ar   strong   art   div   

原文地址：http://www.cnblogs.com/plzdaye/p/3961100.html