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