jQuery dategrid自适应宽度

我想正在用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. height = height < minHeight ? minHeight : height;
22. width = width < minWidth ? minWidth : width;
23. $(this).datagrid(‘resize‘, {
24. height : height,
25. width : width
26. });
27. }
28. });

使用方法：

Js代码  

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

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

$(‘#‘ + datagridId).datagrid({

title: ‘用户类型‘,

url: ‘userType.json‘,

fitColumns: false,

.......