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：

datagrid

和

treegrid

都有

remoteSort

这个东东，别搞错了！！

End.