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

本文探讨了在页面初始化时Easyui数据表加载数据多次的问题,并提供了通过将事件初始化操作放入dataoptions和使用JavaScript动态设置URL来解决该问题的方法。同时,解释了在页面初始化中有多个使用$('#dg').datagrid()时仍会多次加载URL的原因,并最终通过移除class声明解决了此隐患。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近遇到了个问题,就是页面初始化时,Easyui数据表格加载数据时URL请求多次。如图:


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

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

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


这样URL就只执行一次。但是最近让我们UI组把右击事件封装到底层,问题又来了,这就相当于右击事件跟表格又分开了,URL请求又会变成两次。。。

后来就想着是不是把URLtable表格中抽离出来放到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({}),就会多加载一次,比如我目前写的行内编辑,如图:


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


评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值