EasyUI1.4.2 DataGrid二次加载的问题

最近在使用EasyUI1.4.2的DataGrid的过程中,发现了两个会二次加载的情况;

第一个是在页面初始化的时候,如果给datagrid指定了URL属性,而且pageNumber属性没有设置为1的时候,就会出现二次加载的情况。

第二个是条件查询的时候,填上条件之后,直接点击分页栏的左右按钮,这个时候,会产生两次请求,第一次请求是正常的带条件的请求,第二次请求是请求URL属性设置的地址,最后表格中的数据也是请求URL属性设置的地址返回的结果。

解决方案:

第一个问题比较好解决,将pageNumber设置为1就可以了,这个地方的原因如下:

在EasyUI1.4.2源码中的_612函数,这个函数的主要作用就是获取表格需要的数据,同步 DataGrid和Pagination的相关信息;

函数如下:

 //data是表格的data,是getData函数的返回值
//_64b就是DataGrid对象
function _612(_64b,data){
var _64c=$.data(_64b,"datagrid");
var opts=_64c.options;
var dc=_64c.dc;
data=opts.loadFilter.call(_64b,data);
data.total=parseInt(data.total);
_64c.data=data;
if(data.footer){
_64c.footer=data.footer;
}
if(!opts.remoteSort&&opts.sortName){
var _64d=opts.sortName.split(",");
var _64e=opts.sortOrder.split(",");
data.rows.sort(function(r1,r2){
var r=0;
for(var i=0;i<_64d.length;i++){
var sn=_64d[i];
var so=_64e[i];
var col=_5e0(_64b,sn);
var _64f=col.sorter||function(a,b){
return a==b?0:(a>b?1:-1);
};
r=_64f(r1[sn],r2[sn])*(so=="asc"?1:-1);
if(r!=0){
return r;
}
}
return r;
});
}
if(opts.view.onBeforeRender){
opts.view.onBeforeRender.call(opts.view,_64b,data.rows);
}
opts.view.render.call(opts.view,_64b,dc.body2,false);
opts.view.render.call(opts.view,_64b,dc.body1,true);
if(opts.showFooter){
opts.view.renderFooter.call(opts.view,_64b,dc.footer2,false);
opts.view.renderFooter.call(opts.view,_64b,dc.footer1,true);
}
if(opts.view.onAfterRender){
opts.view.onAfterRender.call(opts.view,_64b);
}
_64c.ss.clean();
var _650=$(_64b).datagrid("getPager");
if(_650.length){
var _651=_650.pagination("options");
if(_651.total!=data.total){
//pagination的refresh就是用传入的参数对象的属性覆盖pagination对象的对应属性
_650.pagination("refresh",{total:data.total});
//opts是datagrid的属性,_651是pagination的options对象
if(opts.pageNumber!=_651.pageNumber&&_651.pageNumber>0){
opts.pageNumber=_651.pageNumber;
//_64b就是那个表格对象
_611(_64b);
}
}
}
_5af(_64b);
dc.body2.triggerHandler("scroll");
$(_64b).datagrid("setSelectionState");
$(_64b).datagrid("autoSizeColumn");
opts.onLoadSuccess.call(_64b,data);
};

原因就是pagination对象的pageNumber在表格第一次加载的时候,是1,DataGrid的pageNumber属性这个时候还是我们设置的属性,这两个属性在下面这段代码里同步,在这还没有同步:

if(opts.pageNumber!=_651.pageNumber&&_651.pageNumber>0){
opts.pageNumber=_651.pageNumber;
//_64b就是那个表格对象
_611(_64b);
}

在_611这个函数中,会再一次请求服务器,所以我们就是不让代码走进这个循环,也就是让opts.pageNumber==_651.pageNumber即可。

初次加载时。pagination的pageNumber属性是1,只要我们把DataGrid的pageNumber属性也设置为1,这样DataGrid初次加载的时候就不会二次请求了。

这里顺便看下_611函数:

/**_6e1是表格对象
 * _6e2是queryParams
 */
function _611(_6e1,_6e2){
var opts=$.data(_6e1,"datagrid").options;
if(_6e2){
opts.queryParams=_6e2;
}
var _6e3=$.extend({},opts.queryParams);
if(opts.pagination){
$.extend(_6e3,{page:opts.pageNumber||1,rows:opts.pageSize});
}
if(opts.sortName){
$.extend(_6e3,{sort:opts.sortName,order:opts.sortOrder});
}
if(opts.onBeforeLoad.call(_6e1,_6e3)==false){
return;
}
$(_6e1).datagrid("loading");
//在这会请求一次服务器
var _6e4=opts.loader.call(_6e1,_6e3,function(data){
$(_6e1).datagrid("loaded");
$(_6e1).datagrid("loadData",data);
},function(){
$(_6e1).datagrid("loaded");
opts.onLoadError.apply(_6e1,arguments);
});
if(_6e4==false){
$(_6e1).datagrid("loaded");
}
};

总结一下:这个问题产生的原因是Pagination的pageNumber属性被初始化为1,如果DataGrid的pageNumber属性不设置为1,会导致代码进入_611函数,_611函数会再次请求服务器。这个地方要注意的就是设置DataGrid的pageNumber和Pagination的pageNumber初始化时的值一样,也就是1。

第二个问题其实是第一个问题一个放大的情况,还是下面这个判断的问题,举个例子,表格初始加载时,我们设置DataGrid的pageNumber属性为1,Pagination对象的属性初始化为1,这时,我们在条件输入框里输入条件,不去请求后台,获取分页需要的信息(其实就是data.total),直接点击分页栏的下一页按钮,请求服务器,返回数据,那么这时,Pagination的pageNumber是2,DataGrid的pageNumber是1,当代码走到下面这个判断的时候,两个条件都符合,就会又进入_611函数,再次请求服务器,那么我们看到传到_611函数的是表格对象,那么请求服务器的pageNumber肯定也是用的DataGrid的pageNumber属性,也就是这是二次请求请求的是无条件的第一页,数据返回来之后,DataGrid加载返回的无条件的第一页数据。那么我们不行执行_611函数的话,只要破坏这两个条件中的一个就可以,_651.pageNumber>0这个条件破坏不了,Pagination对象的pageNumber属性必须要是正的。那么我们就破坏第一个条件,让opts.pageNumber和_651.pageNumber在条件判断之前相等就可以了。

传入_611函数的是表格对象,很显然需要让Pagination对象的pageNumber属性等于DataGrid的pageNumber属性。那么在条件判断之前执行_651.pageNumber=opts.pageNumber;就可以了。

if(opts.pageNumber!=_651.pageNumber&&_651.pageNumber>0){
opts.pageNumber=_651.pageNumber;
//_64b就是那个表格对象
_611(_64b);
}

更精妙的做法是下面这样:

if(_651.total!=data.total){
//pagination的refresh就是用传入的参数对象的属性覆盖pagination对象的对应属性
_650.pagination("refresh",{**pageNumber:_651.pageNumber||opts.pageNumber**,total:data.total});
//opts是datagrid的属性,_651是pagination的options对象
if(opts.pageNumber!=_651.pageNumber&&_651.pageNumber>0){
opts.pageNumber=_651.pageNumber;
//_64b就是那个表格对象
_611(_64b);
}
}

顺便说下,如果先用条件查询服务器,在按分页栏上的上一页,下一页按钮的话,是没有这种情况的;输入条件-》点击查询-》点击上一页、下一页按钮,我们一般是使用这个流程,这个流程是没有问题的,上述情况只发生在输入条件-》点击上一页、下一页按钮,这样使用的时候。

时间: 2024-08-30 15:28:31

EasyUI1.4.2 DataGrid二次加载的问题的相关文章

谈谈easyui datagrid 的数据加载(转)

这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程中容易产生的误区做较为详细的描述,希望能对大家有所帮助. url方式加载数据 调用方式 目前可能大多数人都是选择这种方式,因为跟流行的框架结合的也比较好,使用url的话,可以将

【颗粒归仓】(一)jQuery easyui datagrid 的数据加载

其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非url调用).在项目中我用到的以及研究别人代码中用到的普遍是第一种,下面就分别对他们进行总结. 一.ajax加载目标url返回的json数据 首先明确,通过ajax加载目标url返回的值不一定是json格式,在http://blog.csdn.net/luckystar689/article/details/5

谈谈easyui datagrid 的数据加载

文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程

easyui中的datagrid的数据加载的问题

我们在第一次使用easyui的datagrid的url加载所需的数据时,如果第二次加载数据我们使用的不是ulr而是数据返回结果进行加载的时候$("#div").datagird('loadData',data)就如同这样,我们是不能将最新的数据加载上的,表单加载的数据仍然是原来的数据,因为url还是原来的url,datagrid会按照原来的数据进行加载,这时候我们如果想要加载数据的时候可以使用$("#div").datagrid({url,"",

【EasyUi DataGrid】动态加载列

动态加载列可以说是一个从无到有的过程,如果只是网页上的DataGrid实现那就太无味了,有趣的在这里,这个页面上连带着一大堆的数据库表的查询修改,尤其是做着做着发现数据表设计有缺陷,需要的数据竟然只有出口没有入口,想想也是醉了,对业务不熟悉真心的杀不起啊.这个其实蛮好玩的,就像玩捉迷藏藏得那个人叫做nothing,再后来我又遇到了Multiple-births(多胞胎),一个页面上涉及到了六七张数据库表,里边的字段名虽然不一样,可它就是达到了百分之七八十的相似度,多亏咱是上过学的,欺负不了我读书

EasyUI - DataGrid 组建 - [ 组件加载和排序 ]

效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html代码: <table id="tab"></table> JS代码: 此时显示的列名称,对应的是JSON数据中的列名称. $(function () { $('#tab').datagrid({ width: 500,//宽度 title: '信息列表',//标题名

使用Jquery-easyUI的datagrid从后台加载数据不成功的解决办法

最近在用easyUI做一个注册页面总是出现从后台数加载不成功的问题,后来在一个师兄的指导下通过debug模式终于发现问题并解决了,以下记录我解决这一问题的过程.开发环境:jdk1.7,工具:eclipse,框架:spring-mvc spring-mvc的配置代码 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/sche

easyui datagrid 内容无法加载的问题

先看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"/> <title>增加,删除行</title> <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/default/easyui

【datagrid】动态加载列

之前我们的项目在前台显示只需要把数据从数据库读出来进行显示就可以,datagrid的表头字段都是写死的,把数据往表里一扔,就基本没什么事儿了,结果客户前几天要求,其中一个字段不能是死的,应该是有多少项显示多少项,比如说,原来只需要显示:其他项总分,现在需要显示的则是:xx加分,xx加分,xx减分,xx加分....字段不固定,有多少项也不确定,需要从数据库中查到相应的字段来进行显示. 不能要求客户来适应咱们的系统啊,而应该全心全意为客户着想,所以,开始改.原来的情况是,所有的字段都是固定的,而且要