EasyUI Datagrid 分页的情况下实现点击表头的小…

2018-06-24 00:01:28来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

说明一下:
当点击 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.

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js 如何判断一个数字是不是2的n次方幂

下一篇:Ajax提交form表单