jqGrid TreeGrid 加载数据 排序 扩展

• 发现 jqgrid treegrid 加载的数据必须要排序
• 给了两种平滑数据模式尽然不内部递归
• 所以改了下源码加了个数据二次过滤器扩展

 

数据本该是这样的

结果没排序成这样了 (而且还得是从根节点到子节点整体排序)

 

1. loadfilters: 数据过滤器扩展 (顺带把parentid为非字符串类型导致初始化后没闭合bug解决了) 

$.extend($.jgrid.defaults, {
        loadfilter: function (d) {

            function compare(name, minor) {
                return function (o, p) {
                    var a, b;
                    if (o && p && typeof o === 'object' && typeof p === 'object') {
                        a = o[name];
                        b = p[name];
                        if (a === b) {
                            return typeof minor === 'function' ? minor(o, p) : 0;
                        }
                        if (typeof a === typeof b) {
                            return a < b ? -1 : 1;
                        }
                        return typeof a < typeof b ? -1 : 1;
                    } else {
                        thro("error");
                    }
                }
            }
            function rawdata(r, parentfield) {
                if (!(r instanceof array)) {
                    r[parentfield] = r[parentfield].tostring(); //转string初始化才会闭合
                    r['isleaf'] = true;
                    return r;
                }
                var datatmp = [];
                for (var i = 0; i < r.length; i++) {
                    var children = r[i]['children'];
                    r[i]['children'] = null; 
                    r[i][parentfield] = r[i][parentfield].tostring(); //转string初始化才会闭合
                    r[i]['isleaf'] = !children;
                    datatmp.push(r[i]);
                    if (children) datatmp = datatmp.concat(rawdata(children, parentfield));
                }
                return datatmp;
            }

            var data = d.rows;
            var idfield, treefield, parentfield, seqfield, level_field;
            idfield     = this.p.treereader.id_field || 'id';
            parentfield = this.p.treereader.parent_id_field || 'pid';
            levelfield  = this.p.treereader.level_field || idfield//'level'
            seqfield    = this.p.treereader.seq_field || idfield//'seq' // 注意：绑定上是显示字段用 treefield 

            if(seqfield != idfield)  data.sort(compare(levelfield, compare(seqfield)));
            else data.sort(compare(seqfield) );

            var i, l, treedata = [], tmpmap = [];
            for (i = 0, l = data.length; i < l; i++) {
                tmpmap[data[i][idfield]] = data[i];
            }
            for (i = 0, l = data.length; i < l; i++) {
                if (tmpmap[data[i][parentfield]] && data[i][idfield] != data[i][parentfield]) {
                    if (!tmpmap[data[i][parentfield]]['children'])
                        tmpmap[data[i][parentfield]]['children'] = []; 
                    tmpmap[data[i][parentfield]]['children'].push(data[i]);
                } else { 
                    data.sort(function (a, b) { return a[seqfield] - b[seqfield]; }); //从小到大排序
                    treedata.push(data[i]);
                }
            }
            d.rows = rawdata(treedata, parentfield);
            return d;
        }
    });

 

2. treegrid配置数据

 1     "treegrid": true,
 2     "expandcolumn": "title",
 3     "treedatatype": "json",
 4     "treegridmodel": "adjacency",  //选adjacency模式 (nested模式真zz,怎么会有这种数据格式) 
 5     "treereader": {
 6         "id_field": "id",              //id       非空
 7         "parent_id_field": "parentid", //父节点id 非空  
 8         "level_field": "level",        //层级     非空
 9         "seq_field": "seq",            //层级排序 可选字段 默认id排序
10         //"leaf_field": "isleaf",      //叶节点过滤内已处理
11     },    

jquery(document).ready(function($) {
        jquery('#jqgrid').jqgrid({
            "url": '@url.action("getmenu", "setup")',
            "datatype": "json", //json", //data: jsondata,
            "colmodel":[
                    { name: 'id', "key": true, "width": 50 }, // "hidden": true,
                { lable:'pid' , name: 'parentid', width: 70 },
                 { label: '名称', name: 'title', width: 180,  },
                 { label: '图标', name: 'img', width: 180 },
                 { label: '地址', name: 'href', width: 300 },
                 { label: '排序', name: 'seq', width: 80 },
                 { label: '打开方式', name: 'target', width: 80 },
                 { label: '层级', name: 'level', width: 80 },
                 { label: '删除', name: 'isdel', width: 80 }
            ],
            "hoverrows":false,
            "viewrecords":false,
            "gridview":true,
            "height":"auto",
            "rownum":100,
            "scrollrows": true,

            //"loadonce": true,
            "treegrid": true,
            "expandcolumn": "title",
            "treedatatype": "json",
            "treegridmodel": "adjacency",  //选adjacency模式 (nested模式真zz,怎么会有这种数据格式) 
            "treereader": {
                "id_field": "id",              //id       非空
                "parent_id_field": "parentid", //父节点id 非空  
                "level_field": "level",        //层级     非空
                "seq_field": "seq",            //层级排序 可选字段 默认id排序
                //"leaf_field": "isleaf",      //叶节点过滤内已处理
            },
            "pager": "#jqgridpager"
        });
    });

 

3.jsgrid.js源码修改 2处

//>1 注册过滤器扩展方法
$.fn.jqgrid = function( pin ) {
    if (typeof pin === 'string') {
        ........
    }
    return this.each( function() {
                ........
        var p = $.extend(true, {
            loadfilter: null, //就加这一行  ajax加载数据后二次过滤
            url: "",
            height: 150,

 

　　//>2 调用过滤器 搜索 case "script" 或 $.ajax
　　case "script":
        $.ajax($.extend({
            url:
                        ........
            success: function (data, st, xhr) {
                if ($.isfunction(ts.p.loadfilter)) { 
                    //添加这个if块即可   加载数据后二次过滤
                    data = ts.p.loadfilter.call(ts,data);
                }     
                if ($.isfunction(ts.p.beforeprocessing)) {
                                 .......
                            }