【UI集锦】Easyui datagrid初始化重复加载

最近遇到了个问题，就是页面初始化时，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({})，就会多加载一次，比如我目前写的行内编辑，如图：

就会又加载一次。。虽然大部分模块里面没有这个功能，但是这还是一个隐患啊！哎，还需要继续研究，希望各位大神能够提供好的解决方法。。