1. 程式人生 > >EasyUI Datagrid 分頁的情況下實現點選表頭的小三角圖示對資料庫中所有資料重新排序

EasyUI Datagrid 分頁的情況下實現點選表頭的小三角圖示對資料庫中所有資料重新排序

說明一下:
當點選 datagrid 表頭某一列的小三角圖示時,easyui 本身是有排序的,但是在當我們對 datagrid 進行了分頁的情況下,點選排序只是對當前頁的資料進行排序,而需求需要我對資料庫裡面的所有資料進行排序,這樣的話只能從後臺先排好序再返回了。

看了一下文件,發現點選小三角圖示時會觸發 onSortColumn 事件,於是我們只要在觸發這個事件的時候重新向後臺請求一遍 datagrid 的資料好了。

那就直接上程式碼吧~~

var sortOrder = "asc"; // 排序方式,asc:正序,desc:倒序
var sortField = "NickName"
; // 要排序的列名稱 // 初始化資料列表 function initDatagrid() { $('#dg').datagrid({ url: '/api/Member', method: "get", striped: true, border: true, selectOnCheck: false, checkOnSelect: false, remoteSort: true, // 定義是否從伺服器排序資料,要設定為true singleSelect: false
, idField: 'MemberId', pagination: true, rownumbers: false, pageSize: 20, fitColumns: true, columns: [[ ... ]], // 把要排序的列名稱與正序/倒序這兩個引數也傳到後臺進行處理 onBeforeLoad: function (params) { params.nickName = $("#nickName"
).val(); params.phone = $('#phone').val(); params.sortField = sortField; params.sortOrder = sortOrder; }, // 點選某一列進行排序時觸發的事件 onSortColumn: function (sort, order) { sortField = sort; // 要排序的列名稱 sortOrder = order; // 正序or倒序 $('#dg').datagrid('reload'); } }); }

不過這樣還沒完善,在 easyui 裡本來點選 onSortColumn 就是請求了一次後臺的,這一點可以打斷點測試一下。
所以,我們需要把原來的那次請求遮蔽掉,否則會請求兩次後臺。
具體的做法,就是修改 jquery.easyui.js / jquery.easyui.min.js 檔案。

jquery.easyui.js / jquery.easyui.min.js 檔案中搜 remoteSort,找到下面這段程式碼

if(opts.remoteSort){
_646(_63c);
}else{
_647(_63c,$(_63c).datagrid("getData"));
}
opts.onSortColumn.call(_63c,opts.sortName,opts.sortOrder);
};

if 裡面執行的程式碼註釋掉就好了。(在上圖中是 _646(_63c);,有可能不一樣??)。
PS:datagridtreegrid 都有 remoteSort 這個東東,別搞錯了!!

End.