from:http://www.easyui.info/archives/204.html
这篇文章只谈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数据就已经算是完美了,至少该有的问题均已经解决了,希望大家有更好建议一起交流……
再次谈谈easyui datagrid 的数据加载的更多相关文章
-
[转载]再次谈谈easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
-
谈谈easyui datagrid 的数据加载(转)
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
-
谈谈easyui datagrid 的数据加载
文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...
-
jQuery easyui datagrid 的数据加载
其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...
-
easyui datagrid 的数据加载Json数据
var obj = {'total':100,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]}; $('#tt').datagrid('loadData',o ...
-
EasyUI - DataGrid 组建 - [ 组件加载和分页 ]
效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html ...
-
轻松搞定 easyui datagrid 二次加载的问题(转)
对于使用url方式的初学者,经常碰到重复请求的问题,这个问题的根源是因为一旦设置了url参数,Datagrid组件在实例化的时候就会做请求,如何避免二次加载这样问题呢,个人觉得注意以下两点基本就可以防 ...
-
easyUI datagrid 刷新取消加载信息 自动刷新闪屏问题
<style type="text/css"> /*-- 消除grid屏闪问题 --//*/ .datagrid-mask { opacity: 0; filter: ...
-
EasyUI datagrid 数据加载
网上找了好多人的方法发现都有问题发一个可用方便的 主要分三种情况 加载1,loaddata 加载2,datagrid 加载3, url 加载 第一部分,datagrid加载 第二部分,点击 datag ...
随机推荐
-
Pattern Lab - 构建先进的原子设计系统
Pattern Lab 是一个工具集,帮助您创建原子设计系统.在它的核心,是一个自定义静态网站生成器,构建了类似原子,分子和界面结合在一起,形成模板和页面.Pattern Lab 可以作为项目的模式库 ...
-
Sql server之路 (一)基础学习
查询 1.Select * from表名 2.Select 字段1,字段2,from表名 3.Select 字段1,字段2,...from表名 where 字段1 in('内容') 插入 1.inse ...
-
sersync2 实时同步配置
在同步服务器上开启sersync,将监控路径中的文件同步到目标服务器,因此需要在同步服务器配置sersync,在同步目标服务器配置rsync. 一.同步目标服务器配置rsync # rpm -qa | ...
-
Java入门到精通——开篇
本系列博客大体框架构思了一段时间了,本系列博客包含了对现有知识的总结也有对未来知识的展望. 本系列博客包括七大部分如下: 第一部分 Java基础应用 讲述JAVA的基础从以下几方面讲述 ...
-
aix光盘安装包 aix puppet agent 自动化安装
脚本待处理事务1,替换指定行数据2,获取$1 :字段分割 [Tips Notes,byRui]从光盘等安装媒介中isntallp -l -d /opt/ruiyhe or /dev/cd0 搜索所有的 ...
-
Hive Server 2 安装部署测试
Hive 0.11 包含了Hive Server 1 和 Hive Server 2,还包含1的原因是为了做到向下兼容性.从长远来看都会以Hive Server 2作为首选 1. 配置hive ser ...
-
关于通过ruby互联网同步时间的几个思路
我开始的思路是通过ruby的网络抓包能力,直接从时间同步网页抓取时间.但实际操作中发现很多时间网页都用的是js脚本计算的时间,直接抓成html文件,本地打开后会发现时间显示处都是空白. 比如网上朋友帮 ...
-
JavaScript第一回-来龙去脉
简写:JavaScript-JS ECMAScript-ES 写在前面的话:啃文字大多时间不是件愉快的事情,但是我们必须过这个坎,让自己习惯,让自己不讨厌,至于喜欢不喜欢,我们等时间给出答案. J ...
-
Java创建对象的4种方式
Java创建对象的方式共有四种: 使用new语句实例化一个对象: 通过反射机制创建对象: 通过clone()方法创建一个对象: 通过反序列化的方式创建对象. 一.使用new语句实例化一个对象 new语 ...
-
C_数据结构_递归实现求阶乘
# include <stdio.h> int main(void) { int val; printf("请输入一个数字:"); printf("val = ...