jquery easyui datagrid请求两次或多次的问题解决方法

var $grid = $("#elementYEAR_datagrid");
$grid.datagrid({
nowrap: false, //一行显示数据,提高加载性能true
striped: true, //隔行换色
collapsible:false,//是否可折叠的
fit: true,//height 100%
method:'POST',
remoteSort:false, //要排序的数据从服务器定义
pageSize: 25,//每页显示的记录条数,默认为10
pageList: [25,30,50,100],//可以设置每页记录条数的列表
pagination:true,//分页控件
rownumbers:false,//行号
singleSelect:true,
toolbar:'#elementYEAR_tb',
onLoadError:function(data){
location.href="/HWIP/401.jsp";
}
});


问题原因\解决方


当进入页面初始化datagrid的时候发现向后台发送了两次请求,获取数据的方法执行了两次,但我初始化datagrid的时候并没有定义URL属性,肯定也不会发送请求;往下代码能发送请求的就只有$grid.datagrid("load")这一句,最多也只会发送一次,但事实是两次,这是为什么呢,难道这是easyui的一个BUG吗?经过断点调试与思考,我发现datagrid在初始化的时候,即使不定义URL属性,也会有“处理中,请稍候。。。”这样的加载中效果(持续那么一瞬间),但是肯定没有发送请求的,估计源码中通过setTimeout来实现。问题就出在这里了,就是在setTimeout的过程中,我下面的代码定义了URL属性,setTimeout后发现URL被定义了,所以照样发送了一个请求,然后我load了一次,又重复发送了一个请求。了解了这样的原理后,我通过加入setTimeout解决了这个问题:


window.setTimeout(function(){
$.extend($grid.datagrid("options"),{
url : "ServiceData/getCountYearData.do",//这里定义url
queryParams : { ids:cityid}//根据实际情况定义参数
});
$grid.datagrid("load");
},100);//延迟100毫秒执行


补充解决方法


html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid,这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解决的方法就是只用一种初始化方法来声明easyUI组件以避免重复的提交请求,即删除html中的class声明(class="easyui-datagrid")

http://jyhft.com/jedjj.html


你可能感兴趣的:(IT世界)