【UI集錦】Easyui datagrid初始化重複載入
阿新 • • 發佈:2019-01-06
最近遇到了個問題,就是頁面初始化時,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({}),就會多載入一次,比如我目前寫的行內編輯,如圖:
就會又載入一次。。雖然大部分模組裡面沒有這個功能,但是這還是一個隱患啊!哎,還需要繼續研究,希望各位大神能夠提供好的解決方法。。