目前我还没发现Jquery-Easyui自带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 Easy-UI DataGrid性能调优文档,欢迎喜欢的朋友下载学习!
主要介绍了EasyUI 数据表格datagrid列自适应内容宽度的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
jquery easy ui edatagrid 动态编辑表格 下拉框 联动 ,支持增加,编辑,删除行,日期狂,下拉框联动显示数据,测试ok
jquery easy ui datagrid完整项目源代码,非常值得学习
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编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
jui_datagrid 是一个 Ajax 的 jQuery 表格插件,可用于操作表格数据,通过简单和强大的 API 进行主题定制、本地化支持等。 在线演示:http://www.pontikis.net/labs/jui_datagrid/demo/ 标签:...