說(shuō)明一下：
當(dāng)點(diǎn)擊 datagrid 表頭某一列的小三角圖標(biāo)時(shí)娃属，easyui 本身是有排序的，但是在當(dāng)我們對(duì) datagrid 進(jìn)行了分頁(yè)的情況下蛉顽，點(diǎn)擊排序只是對(duì)當(dāng)前頁(yè)的數(shù)據(jù)進(jìn)行排序蝗砾，而需求需要我對(duì)數(shù)據(jù)庫(kù)里面的所有數(shù)據(jù)進(jìn)行排序，這樣的話(huà)只能從后臺(tái)先排好序再返回了携冤。
看了一下文檔悼粮，發(fā)現(xiàn)點(diǎn)擊小三角圖標(biāo)時(shí)會(huì)觸發(fā) onSortColumn 事件，于是我們只要在觸發(fā)這個(gè)事件的時(shí)候重新向后臺(tái)請(qǐng)求一遍 datagrid 的數(shù)據(jù)好了曾棕。
那就直接上代碼吧~~
var sortOrder = "asc"; // 排序方式扣猫，asc：正序，desc：倒序
var sortField = "NickName"; // 要排序的列名稱(chēng)
// 初始化數(shù)據(jù)列表
function initDatagrid() {
$('#dg').datagrid({
url: '/api/Member',
method: "get",
striped: true,
border: true,
selectOnCheck: false,
checkOnSelect: false,
remoteSort: true, // 定義是否從服務(wù)器排序數(shù)據(jù)睁蕾，要設(shè)置為true
singleSelect: false,
idField: 'MemberId',
pagination: true,
rownumbers: false,
pageSize: 20,
fitColumns: true,
columns: [[
...
]],
// 把要排序的列名稱(chēng)與正序/倒序這兩個(gè)參數(shù)也傳到后臺(tái)進(jìn)行處理
onBeforeLoad: function (params) {
params.nickName = $("#nickName").val();
params.phone = $('#phone').val();
params.sortField = sortField;
params.sortOrder = sortOrder;
},
// 點(diǎn)擊某一列進(jìn)行排序時(shí)觸發(fā)的事件
onSortColumn: function (sort, order) {
sortField = sort; // 要排序的列名稱(chēng)
sortOrder = order; // 正序or倒序
$('#dg').datagrid('reload');
}
});
}
不過(guò)這樣還沒(méi)完善苞笨，在 easyui 里本來(lái)點(diǎn)擊 onSortColumn 就是請(qǐng)求了一次后臺(tái)的，這一點(diǎn)可以打斷點(diǎn)測(cè)試一下子眶。
所以瀑凝，我們需要把原來(lái)的那次請(qǐng)求屏蔽掉，否則會(huì)請(qǐng)求兩次后臺(tái)臭杰。
具體的做法粤咪，就是修改 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 里面執(zhí)行的代碼注釋掉就好了寥枝。（在上圖中是 _646(_63c);宪塔，有可能不一樣？囊拜？）某筐。
PS：datagrid 和 treegrid 都有 remoteSort 這個(gè)東東，別搞錯(cuò)了９邗巍南誊！
End.
