说明一下:
当点击 datagrid
表头某一列的小三角图标时,easyui
自己是有排序的,可是在当咱们对 datagrid
进行了分页的状况下,点击排序只是对当前页的数据进行排序,而需求须要我对数据库里面的全部数据进行排序,这样的话只能从后台先排好序再返回了。javascript
看了一下文档,发现点击小三角图标时会触发 onSortColumn
事件,因而咱们只要在触发这个事件的时候从新向后台请求一遍 datagrid
的数据好了。java
那就直接上代码吧~~jquery
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
,找到下面这段代码api
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.markdown