easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容。其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据;另一种是加载js对象,也就是使用loadDate方法。
这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程中容易产生的误区做较为详细的描述,希望能对大家有所帮助。
url方式加载数据
调用方式
目前可能大多数人都是选择这种方式,因为跟流行的框架结合的也比较好,使用url的话,可以将url写在DOM里面或者申明datagrid对象的url属性,以下两种方式都是可以的:
<table id="tt" style="width:700px;height:auto" title="DataGrid" idField="itemid" url="datagrid_data2.json">
$('#test').datagrid({url:'datagrid_data2.json'
});
相关方法
load | param | 加载第一页数据,param将代替默认查询参数,注意的是该方法只适用于url方式. |
reload | param | 刷新当前页数据,与load方法不同的时候reload方法刷新当前页数据,而load方法会跳到第一页然后刷新. |
options | null | 获取datagrid实例的各项参数值,常用的参数有url,pageNumber,pageSize这三个参数在请求数据以及分页功能中起重要作用. |
二次加载问题
对于使用url方式的初学者,经常碰到重复请求的问题,这个问题的根源是多次渲染组件,如何避免二次加载这样问题呢,个人觉得注意以下两点基本就可以防止二次加载了。
- 使用load和reload函数去动态加载数据,而不是选择再次渲染组件。很多人再次渲染组件的目的仅仅是为了设置url,这得不偿失,url的设置可以通过options方法获取到组件实例的opts,然后在给opts.url重新赋值即可;
- class方式注册组件和javascript注册方式不要同时使用。class注册方式一般是为了初始化属性,javascript方式则属性和事件都可初始化,但是不管是class方式还是javascipt方式注册组件,每次注册,只要被设置过url属性就会做请求。所以在不可避免要使用javascript方式注册的情况下,索性就不要使用class方式注册了。
因为url方式网上的资料特别多,我这里就简述这么多,下面重点讨论一下loadDate方式加载数据。
加载本地数据方式
首先要明白“加载本地数据”是个什么概念,这里指的是加载javascript对象数据,而javascript数据对象显然可以使是通过其它异步方式获得的,所以这个“加载本地数据”的描述并不准确。
调用方式
先要将url属性设置为null,或者不设置,然后使用datagrid的loadDate方法加载js数据对象,这个对象包含两个属性,一个是记录总数,一个是当前页码的对象数组。例如:
var obj = {'total':100,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]};
$('#tt').datagrid('loadData',obj);
如何分页
不对源码做任何改动的话,可以首先获取datagrid的Pagination对象,然后通过写Pagination对象的onSelectPage事件来实现分页:
- //初始化dategrid
- $('#tt').datagrid({
- url:null,
- pagination:true,
- pageSize:20,
- pageNumber:1,
- rownumbers:true
- });
- $('#tt').datagrid('getPager').pagination({
- displayMsg:'当前显示从 [{from}] 到 [{to}] 共[{total}]条记录',
- onSelectPage : function(pPageIndex, pPageSize) {
- //改变opts.pageNumber和opts.pageSize的参数值,用于下次查询传给数据层查询指定页码的数据
- var gridOpts = $('#tt').datagrid('options');
- gridOpts.pageNumber = pPageIndex;
- gridOpts.pageSize = pPageSize;
- //定义查询条件
- var queryCondition = {name:"世纪之光"};
- //异步获取数据到javascript对象,入参为查询条件和页码信息
- var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);
- //使用loadDate方法加载Dao层返回的数据
- $('#tt').datagrid('loadData',{"total" : oData.page.recordCount,"rows" : oData.data});
- }
- });
上面的代码应该很容易看懂了,做出来的分页基本也算正常,唯一的缺憾就是写起来不怎么便捷。那么如何才能便捷地实现分页呢?
之前我写过jQuery easyui datagrid 非URL后台分页的文章,稍微对easyui datagrid做下扩展,增加一个doPagination事件,那么编码就较为简单了。
- //初始化dategrid
- $('#tt').datagrid({
- url:null,
- pagination:true,
- pageSize:20,
- pageNumber:1,
- rownumbers:true,
- doPagination:function(pPageIndex, pPageSize) {
- var gridOpts = $('#tt').datagrid('options');
- //定义查询条件
- var queryCondition = {name:"世纪之光"};
- //异步获取数据到javascript对象,入参为查询条件和页码信息
- var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,{pageNumber:gridOpts.pageNumber,pageSize:gridOpts.pageSize});
- //使用loadDate方法加载Dao层返回的数据
- $('#tt').datagrid('loadData',{"total" : oData.page.recordCount,"rows" : oData.data});
- },
- });
这种方式就不用再去获取Pagination对象了,而且也不用设置opts的pageNumber和pageSize这两个属性了,编码变得简易了,是不是变得清爽了很多呢?
加载中效果
easyui datagrid只有在使用url方式获取数据的时候才会显示“加载中……”的遮罩效果,使用loadDate方法加载数据的话,其实也可以用上这效果,只不过稍微麻烦些:
- //初始化dategrid
- $('#tt').datagrid({
- url:null,
- pagination:true,
- pageSize:20,
- pageNumber:1,
- rownumbers:true,
- doPagination:function(pPageIndex, pPageSize) {
- //改变opts.pageNumber和opts.pageSize的参数值,用于下次查询传给数据层查询指定页码的数据
- var gridOpts = $('#tt').datagrid('options');
- gridOpts.pageNumber = pPageIndex;
- gridOpts.pageSize = pPageSize;
- Exec_Wait('tt','loadDateGrid()');
- },
- });
- function loadDateGrid(){
- var gridOpts = $('#tt').datagrid('options');
- //定义查询条件
- var queryCondition = {name:"世纪之光"};
- //异步获取数据到javascript对象,入参为查询条件和页码信息
- var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);
- //使用loadDate方法加载Dao层返回的数据
- $('#tt').datagrid('loadData',{"total" : oData.page.recordCount,"rows" : oData.data});
- }
- /**
- * 封装一个公用的方法
- * @param {Object} grid table的id
- * @param {Object} func 获取异步数据的方法
- * @param {Object} time 延时执行时间
- */
- function Exec_Wait(grid,func,time){
- var dalayTime = 500;
- __func_=func;
- __selector_ = '#' + grid;
- $(__selector_).datagrid("loading");
- if (time) {
- dalayTime = time;
- }
- gTimeout=window.setTimeout(_Exec_Wait_,dalayTime);
- }
- function _Exec_Wait_(){
- try{eval(__func_);
- }catch(e){
- alert("__func_:" + __func_ + ";_ExecWait_" + e.message);
- }finally{
- window.clearTimeout(gTimeout);
- $(__selector_).datagrid("loaded");
- }
- }
当然了,你也可以利用datagrid的onLoadSuccess事件来实现,反正最终都是调用datagrid的loding和loaded方法完成等待DIV的显示和隐藏的:
- function loadDateGrid(){
- $('#tt').datagrid('loading');//打开等待div
- var queryCondition = {
- name: "世纪之光"
- };
- var oData = getAjaxDate("orderManageBuz", "qryWorkOrderPaged", queryCondition, oPage);
- $('#tt').datagrid('loadData', {
- "total": oData.page.recordCount,
- "rows": oData.data
- });
- }
- $('#tt').datagrid({
- onLoadSuccess: function(){
- //加载完数据关闭等待的div
- $('#tt').datagrid('loaded');
- }
- });
如何不统计总数
有时候数据层的数据量特别大,查询统计总数的话会很耗时,统计总数就显得不怎么合适了,如何不统计总数完全看你后台怎么写了,可以虚拟一个一个总数,这个数字总是比当前页码大1就行了,具体实现就不在本篇文章关注的范围内了。
到这里,loadData方式加载grid数据就已经算是完美了,至少该有的问题均已经解决了,希望大家有更好建议一起交流……
转载自:http://www.easyui.info/archives/204.html
easyui datagrid 的数据加载相关推荐
- easyui中的datagrid的数据加载的问题
我们在第一次使用easyui的datagrid的url加载所需的数据时,如果第二次加载数据我们使用的不是ulr而是数据返回结果进行加载的时候$("#div").datagird(' ...
- WPF Datagrid 大量数据加载问题
需求:自定义Datagrid样式加载大量数据,至少5000条,加载速度的快慢统计? 第一步:自定义Datagrid样式 这个就不多说了,可以参照以下这篇博客,代码什么都有,根据自己想要的样式修改就行 ...
- easyui datagrid数据加载缓慢问题,优化方法
问题:数据列表展示,主从表展示,多表展示.每个表10行,10-20列.谷歌浏览器.页面加载速度大于5S 解决方法1:列宽度设为固定值,取消自适应.页面加载速度低于2S 参考于:http://www.o ...
- easyUI中dialog弹出框中数据加载不出来
在前端使用easyUI开发的过程中遇到一个奇怪的问题,easyUI中的dialog中的combobox数据有时加载不出来,或者是一些文字也有时加载不出来,后来发现,dialog每次关闭并不会销毁原di ...
- 【easyui】treegrid逐级加载源码
当初看这源码的目的是: 1.treegrid是怎么实现逐级加载树结构的. 解: 见demo,主要就是点击节点的时候会请求后台. 2.treegrid加载后,第二次展开节点会不会再次请求后台. 解:第二 ...
- 旷视MegEngine数据加载与处理
旷视MegEngine数据加载与处理 在网络训练与测试中,数据的加载和预处理往往会耗费大量的精力. MegEngine 提供了一系列接口来规范化这些处理工作. 利用 Dataset 封装一个数据集 数 ...
- PyTorch数据加载处理
PyTorch数据加载处理 PyTorch提供了许多工具来简化和希望数据加载,使代码更具可读性. 1.下载安装包 • scikit-image:用于图像的IO和变换 • pandas:用于更容易地进行 ...
- 分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理 就是页面加载完毕的时候 请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码 我是改的 onload ...
- Pytorch中的数据加载
Pytorch中的数据加载 1. 模型中使用数据加载器的目的 在前面的线性回归模型中,使用的数据很少,所以直接把全部数据放到模型中去使用. 但是在深度学习中,数据量通常是都非常多,非常大的,如此大量的 ...
最新文章
- SUST_ACM_2019届暑期ACM集训热身赛题解
- InnoDB的ib_logfile写入策略
- 11-selenium浏览器自动化
- OnlineJudge 离线题库采集
- 2015级C++第2周实践项目
- mkyaffs2image的用法
- 部署redis主从复制
- 都说90后不好管?聊聊跳槽这件事儿
- 一段话系列-正则基础
- 计算机怎么取消u盘启动程序,计算机设置U盘自动启动程序| U盘自动播放设置
- 【计算机网络笔记】计算机网络定义分类
- c语言字符输出128,如何将128位整数转换为C中的十进制ASCII字符串?
- 无机金属专业里有计算机课吗,无机非金属材料工程专业课程有不少
- 八段锦是一种不错的养生运动
- 戴尔服务器显示器接口类型,拒绝凌乱桌面 Type-C接口显示器的魅力
- python islower方法_(验证)Python中不同类型的islower()方法
- 解决WinHTTP Web Proxy Auto-Discovery Service无法启动问题
- Android向系统日历添加日程提醒事件
- 浅谈CAPM和因子模型
- 联想第一季度业绩超预期,增长势头强劲
热门文章
- iOS最新申请DUNS(邓白氏)详细过程,iOS开发者申请DUNS(邓白氏)相关细节,申请DUNS(邓白氏)的方法...
- 炸房”网游外挂的刑事责任辨析
- python操作mongodb_python 操作 mongodb
- 安全技术系列之Java一句话木马
- //编写程序,输入一个四位数整数如5678,求出它的各位数之和,并在屏幕上解出。
- 计算机3维绘图试题,计算机绘图基础复习试题
- Flink 核心技术浅析(整理版)
- java isnull()_java.util.Objects.isNull vs对象== nu
- CListCtrl用法简介(转)
- struts2框架详解