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;
        }
    });

xxoo

2. TreeGrid配置数据

     "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",      //叶节点过滤内已处理
     },    

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)) {
                                 .......
                            }