1. 程式人生 > >EasyUI例項-欄位排序(以及EasyUI框架的datagrid-bug)

EasyUI例項-欄位排序(以及EasyUI框架的datagrid-bug)

可以看到我的例項-增刪改查中並沒有欄位排序,現在我們嘗試著增加一下:對學號欄位排序 第一次嘗試: 1、datagrid是用html標籤初始化的:
2、在js中用onSortColumn事件來完成欄位排序:

3、Service層(假設easyui會傳遞分頁資訊到後臺):
4、DAO層SQL:
5、問題: 訪問:前端頁面沒成功排序。斷點測試過,點選排序會傳送兩次SQL,一次就是進入排序的方法,第二次就是進入datagrid中的url中的查詢所有方法。兩個方法都加個斷點。排序方法的斷點過了後,查詢斷點不過,發現頁面有了排序後的記錄。當第二個斷點也過了,頁面又會重新載入然後覆蓋排序後的記錄。也發現,排序是全部記錄的排序,不是當前頁面記錄的排序,因為DAO層沒取當前頁面記錄再排序,而是查詢全部資料排序(下面將做出修改)。 總結問題: 第一:不會發送分頁資訊到後臺。 第二:後臺輸出SQL資訊發現,會發送兩次請求,第一次就是點選排序時傳送的SQL,當成功返回資料到前臺頁面後,再發送一次請求,url就是table標籤中的data-options中的url屬性。 第三:沒根據當前頁面資料進行排序 先處理第二個問題:
第一:這是easyui的bug,百度網友說不要用html初始化datagrid,用js初始化(沒用)
第二:網友說在載入返回成功的json資料那用window.setTimeout弄個延遲。是這樣的情況: 例如:(table用html寫好,只不帶class="easyui-datagrid",交給js中初始化) var $grid = $("#datagrid"); $.extend($grid.datagrid("options"),{ url : '........',//這裡定義url queryParams : {}//根據實際情況定義引數 }); $grid.datagrid("load");//這行程式碼執行後傳送了兩次請求 gridHelper.isRefresh = false; } 一開始的初始化沒定義URL屬性,但是也會有“處理中,請稍後。。”,這樣的載入效果持續一瞬間,但也肯定沒傳送請求的,估計原始碼中通過setTimeout來實現,問題就出在這裡了。就是在setTimeout的過程中,下面的程式碼定義了url,setTimeout後發現url被定義了,所以也傳送了一個請求,load這個也會發送兩次請求。可以這樣解決問題,資料載入加上延遲。 window.setTimeout
(function(){ var $grid = $("#datagrid"); $.extend($grid.datagrid("options"),{ url : "",//這裡定義url queryParams : {}//根據實際情況定義引數 }); $grid.datagrid("load"); gridHelper.isRefresh = false; },100);//延遲100毫秒執行,時間可以更短 我們下面進行最終解決問題: 1、datagrid完全用js來初始化: 在觸發排序事件時獲取當前頁面數和每頁記錄數,並將非同步提交加上延遲


2、Action層(這裡就不分service層了,直接呼叫dao):

3、Dao層: sql1:就是先查詢出當前頁面的資料,然後再用sql去排序 注意:頁面初始化時呼叫的方法也要進行欄位排序,sql1根據這同步 例如:第一條是頁面初始化時候查詢資料的sql,第二個就是sql1 select * from stu order by stuNum desc limit 0,10; select * from(select * from stu order by stuNum desc limit 0,10) a order by a.stuNum asc
4、總結: 到這裡,已經將問題解決完了,但是程式碼是非常的麻煩,因為當訪問頁面就得出現資料,所以datagrid本身得被賦予url屬性,所以得寫一個方法對應此url屬性,當然,分頁也是用的這個url屬性。但是到了排序,那就不得不另外寫一個方法去接受排序引數然後進行查詢,這樣子就要寫兩個方法了。現在我有另外一種想法,不給dagagrid的url屬性賦值,點選查詢按鈕才去訪問servlet展示資料,而且分頁的,排序的都用到這個方法。 下面進行第二次嘗試 1、首先來頁面的demo看看: 可以看到,頁面是沒資料的,因為datagrid沒定義url屬性,下面看一下js怎麼寫的
2、datagrid完全用js初始化: 注意,查詢按鈕的查詢事件和分頁的和排序的都是一個方法。 首先是datagrid的初始化:
接下來跟著就是datagrid排序事件:
最後是分頁器的查詢:
下面是查詢方法:
總結:記得datagrid初始化時不要定義url;欄位排序時先判斷頁面是否存在資料了,沒有就不進行排序查詢並返回提示資訊;要記得分頁器也需要弄一個查詢;最後記得查詢方法是都接受分頁資訊和排序資訊的。 3、Action層(這裡就不分service層了,直接呼叫dao):
注意:記得判斷分頁資訊和排序資訊是否為空,不然DAO層的sql拼接會出錯。 4、DAO層:
注意:排序和不排序執行的SQL不一樣。還有特別要注意的是,排序的SQL要同步不排序的SQL,這樣子能保證排序的就是當前頁面的資料:sql1就是先查詢出當前頁面的資料,然後再用sql去排序。