easyui datagrid 对象数据排序

前言

今天在开发一个前端数据表格的时候，发现datagrid无法对对象类型的数据进行排序，于是就对datagrid组件进行了改造。满足了需求，记于此和朋友们学习，如有不正确的望指正。

遇到的问题和分析

我的需要实现的功能和行数据格式如下图：

通过官网的文档进行配置后发现键值对的数据排序正常，而对象类型的数据就不能进行排序。

我的配置如下：

根据官网自定义排序：

{sortable:true,align:"center",field:'IDCard',title:'身份证',width:130,
//官网的自定义排序
formatter:(v,row)=>{return row.to_node.IDCard},sorter:function(a,b){
                        console.log(a) //undefined
                        console.log(b)//undefined
                    }},

打印出官网给的自定义sorter的参数发向全是undefined。于是就去查看easyui.js的代码：

通过分析源代码发现他在执行排序函数的时候传的参数是行对象对应列的具体值。那么当你的列的值是自定义返回的，他当然是拿不到对应的列的值的。

改源代码

就这样源代码修改完成。

下面修改配置

 

代码：

{sortable:true,align:"center",field:'node',title:'节点',width:100,
                    formatter:(v,row)=>{return row.to_node.id},
                    mysorter:function(a,b){
                        console.log(a) //行数据
                        console.log(b) //行数据
                        if (a.to_node.id == b.to_node.id){
                            return 0
                        } else {
                            return (a.to_node.id>b.to_node.id?1:-1);
                        }
                    }},

测试：

成功！！！

总结

源代码修改两处：

1、在 function _740(_741, _742) 函数对应的地方加入 

mysorter: (th.attr("mysorter") ? eval(th.attr("mysorter")) : undefined)

2、修改排序执行逻辑，把函数 function _79d(_7e3, data) 对应的位置修改为

data.rows.sort(function (r1, r2) {
    var r = 0;
    for (var i = 0; i < _7e5.length; i++) {
        var sn = _7e5[i];
        var so = _7e6[i];
        var col = _760(_7e3, sn);
        var _7e7 = col.mysorter || col.sorter || function (a, b) {
            return a == b ? 0 : (a > b ? 1 : -1);
        };
       if (col.mysorter){
           r = _7e7(r1, r2) * (so == "asc" ? 1 : -1);
       } else {
           r = _7e7(r1[sn], r2[sn]) * (so == "asc" ? 1 : -1);
       }

        if (r != 0) {
            return r;
        }
    }
    return r;
});

3、在配置的地方写入自己的排序函数

例如我的：

{sortable:true,align:"center",field:'node',title:'节点',width:100,
   formatter:(v,row)=>{return row.to_node.id},
   mysorter:function(a,b){  
       console.log(a) //行数据
       console.log(b) //行数据
      //相等返回0  大于返回1  小于返回-1
       if (a.to_node.id == b.to_node.id){
           return 0
       } else {
           return (a.to_node.id>b.to_node.id?1:-1);
       }
   }},