您的位置:首页 > 产品设计 > UI/UE

Easyui datagrid初始化重复加载

2015-12-29 21:18 447 查看
最近遇到了个问题,就是页面初始化时,Easyui数据表格加载数据时URL请求多次。如图:



后来同事研究了一下这个问题,是因为在JS中给这个Easyui表格加了双击事件和右击事件,如图代码:

$('#dg').datagrid({
	onRowContextMenu : function(e, index, row) { //右键时触发事件
		e.preventDefault(); //阻止浏览器捕获右键事件
		$('#RightPointmenu').menu('show', {
						//显示右键菜单
		left : e.pageX,//在鼠标点击处显示菜单
		top : e.pageY
	        });
	}
});

因为在页面初始化时这些对表格右击和双击操作也要跟着初始化了,所以在初始化的时候对表格操作了三遍跟着URL也执行了三遍。后来我同事想了个办法就是把这些右击,双击事件初始化操作全部放在了datagrid的dataoptions里面。



这样URL就只执行一次。但是最近让我们UI组把右击事件封装到底层,问题又来了,这就相当于右击事件跟表格又分开了,URL请求又会变成两次。。。
后来就想着是不是把URL从table表格中抽离出来放到JS中,就可以了。后来就用了这种方式:
$(function() {
	 var tremname=$("#tremname").val();
	 var coursetypeid=$("#courseTypeid").val();
	 
	 $('#dg').datagrid({
		 url:"EditTrainingPrograms/queryByCondition?courseTypeId="+coursetypeid+"&tremname="+ tremname
	 });
 })
但是失败了,后来我就抱着不可能的心态又试了另一种方法:
window.onload = function()  {
	 var tremname=$("#tremname").val();
	 var coursetypeid=$("#courseTypeid").val();
	 
	 $('#dg').datagrid({
		 url:"EditTrainingPrograms/queryByCondition?courseTypeId="+coursetypeid+"&tremname="+ tremname
	 });
}

结果结果以为成功了,还是失败了。。。
后来又从网上查找,发现资料很少,有一种说法这样说的,html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid,这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解决的方法就是只用一种初始化方法来声明easyUI组件以避免重复的提交请求,即删除html中的class声明(class="easyui-datagrid")
然后我就照着办了,把class="easyui-datagrid"删除了。如图:



结果发现确实是解决了,值得小高兴一下。。。
但是发现只要初始化有地方用$('#dg').datagrid({}),就会多加载一次,比如我目前写的行内编辑,如图:



就会又加载一次。。虽然大部分模块里面没有这个功能,但是这还是一个隐患啊!哎,还需要继续研究,希望各位大神能够提供好的解决方法。。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: