欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jqGrid TreeGrid 加载数据 排序 扩展

程序员文章站 2022-10-30 21:31:17
发现 jqGrid TreeGrid 加载的数据必须要排序 给了两种平滑数据模式尽然不内部递归 所以改了下源码加了个数据二次过滤器扩展 数据本该是这样的 结果没排序成这样了 (而且还得是从根节点到子节点整体排序) 1. loadFilters: 数据过滤器扩展 (顺带把ParentId为非字符串类型 ......
  • 发现 jqgrid treegrid 加载的数据必须要排序
  • 给了两种平滑数据模式尽然不内部递归
  • 所以改了下源码加了个数据二次过滤器扩展

 

数据本该是这样的

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