我想正在用JQuery Easy UI的朋友一定很希望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性能调优文档,欢迎喜欢的朋友下载学习!
主要介绍了EasyUI 数据表格datagrid列自适应内容宽度的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
jquery easy ui datagrid完整项目源代码,非常值得学习
jquery easy ui edatagrid 动态编辑表格 下拉框 联动 ,支持增加,编辑,删除行,日期狂,下拉框联动显示数据,测试ok
jquery easy ui Demo 框架:包含ui所有插件(pagination、datagrid、tree等),还有一些实例
easyUI datagrid 自动调整行号大小
数据库管理系统,不管是桌面版,还是网页版,我觉得最重要的功能是:增删改查+分页。文档里面的例子就是asp.net web form + easy ui 的datagrid。简单的演示了这五个重要功能。请用vs2010运行,数据库没有给出。
NULL 博文链接:https://wusuobuai.iteye.com/blog/1860496
asp.net Easy Ui datagird分页
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
datagrid添加tooltip及超出宽度添加省略号
Easy UI 实现扫描枪扫二维码查询。使用Jquery掉去datagrid查询。
datagrid代码改变单元格宽度 datagrid代码改变单元格宽度 datagrid代码改变单元格宽度
jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
jui_datagrid 是一个 Ajax 的 jQuery 表格插件,可用于操作表格数据,通过简单和强大的 API 进行主题定制、本地化支持等。 在线演示:http://www.pontikis.net/labs/jui_datagrid/demo/ 标签:...