JQuery EasyUI 載入兩次url的原因分析及解決方案_jquery

1、傳統方式

<span style="font-size:18px;">$(function () { 
var url = "../Source/Query/jhDataQry.ashx&#63;action=query"; 
$(dg).datagrid({ 
url: url, 
queryParams: { 
qsrq: qsrq, 
zzrq: zzrq 
} 
}); 
}) 

<table id="DataGrid" class="easyui-datagrid" fit="true" border="false" toolbar="#TBar" pagination="true" 
data-options="pageSize:20,pageList: [10, 20, 30, 40, 50,100,5000],idField:'chjid',sortName:'chjbh', queryParams: { 'action': 'query'}" 
rownumbers="true" singleSelect="true" url="../Source/JiChu/chjdoc.ashx"> 
<thead> 
<tr> 
</tr> 
</thead> 
</table></span>

2、原因分析及解決方案

html程式碼中利用class宣告了datagrid，導致easyUI解析class程式碼的時候先解析class宣告中的datagrid，這樣元件就請求了一次url；然後又呼叫js初始化程式碼請求一次url。這樣導致了重複加載，解決的方法就是只用一種初始化方法來聲明easyUI元件以避免重複的提交請求，即刪除html中的class聲明(class="easyui-datagrid")，修改後的程式碼如下：

<span style="font-size:18px;"><table id="DataGrid" fit="true" border="false" toolbar="#TBar" pagination="true" 
data-options="pageSize:20,pageList: [10, 20, 30, 40, 50,100,5000],idField:'chjid',sortName:'chjbh'" 
rownumbers="true" singleSelect="true" url="../Source/JiChu/chjdoc.ashx"> 
<thead> 
<tr> 
</tr> 
</thead> 
</table></span>