Jqgrid treegrid数据格式

时间:2017-06-04 06:14:41

标签: jquery jqgrid treegrid

我的环境:jqgrid 5.1,php 5.3

我的数据:

{
"values": [
    {
        "id": "1",
        "mac": "64:09:80:57:A6:EE",
        "username": "WIFI-DQ",
        "company": "Xiaomi Communications Co Ltd",
        "isLeaf": false,
        "expanded": true,
        "level":0,
        "p_id": "0"
    },
    {
        "id": "2",
        "mac": "F0:B4:29:5A:B5:0F",
        "username": "1001",
        "company": "Tenda Technology Co., Ltd.",
        "isLeaf": false,
        "expanded": true,
        "level":0,
        "p_id": "0"
    },
    {
        "id": "3",
        "mac": "64:09:80:57:A6:EF",
        "username": "WIFI-DQ_5G",
        "company": "TP-LINK TECHNOLOGIES CO.,LTD.",
        "isLeaf": false,
        "expanded": true,
        "level":0,
        "p_id": "0"
    },
    {
        "id": "4",
        "mac": "00:1C:BF:8B:DF:8E",
        "username": "QCL16",
        "company": "Intel Corporate",
        "isLeaf": true,
        "expanded": true,
        "level":1,
        "p_id": "2"
    },
    {
        "id": "5",
        "mac": "98:2F:3C:07:56:36",
        "username": "admin23",
        "company": "Xiaomi Communications Co Ltd",
        "isLeaf": true,
        "expanded": true,
        "level":1,
        "p_id": "2"
    },
    {
        "id": "6",
        "mac": "34:80:B3:FC:3F:0B",
        "username": "Iphone",
        "company": "Iphone",
        "isLeaf": true,
        "expanded": true,
        "level":1,
        "p_id": "2"
    },
    {
        "id": "7",
        "mac": "35:85:B3:DC:3F:0B",
        "username": "Lenovo PC",
        "company": "Iphone",
        "isLeaf": true,
        "expanded": true,
        "level":1,
        "p_id": "3"
    }
],
"start": 0,
"limit": 15,
"end": 15,
"pageNumber": 1,
"totalSize": 7,
"totalPages": 1

}

我的HTML:

$('#tree').jqGrid({
            "url":"wifi.json",
            "styleUI" : 'Bootstrap',
            "colModel":[
                {
                    "name":"id",
                    "index":"id",
                    "sorttype":"int",
                    "key":true,
                    "hidden":true,
                    "width":50
                },{
                    "name":"username",
                    "index":"username",
                    "sorttype":"string",
                    "label":"Name",
                    "width":170,
                    formatter: function (value, grid, rows, state) { 
                        return "test:"+value;
                    }
                },{
                    "name":"mac",
                    "index":"mac",
                    "sorttype":"string",
                    "hidden":false,
                    "width":50
                }
            ],
            "width":"600",
            "hoverrows":false,
            "viewrecords":false,
            "gridview":true,
            "height":"auto",
            "loadonce":true,
            "rowNum":100,
            "scrollrows":true,
            // enable tree grid
            "treeGrid":true,
            // which column is expandable
            "ExpandColumn":"username",//点击那一列触发展开,收缩操作
            // datatype
            "treedatatype":"json",
            "treeIcons":{plus:'glyphicon-triangle-right',minus:'glyphicon-triangle-bottom',leaf:''},//plus:折叠起来的图标,minus:展开的图标,leaf:没有子节点了的图标
            // the model used
            "treeGridModel":"adjacency",
            "tree_root_level":0,
            // configuration of the data comming from server
            "treeReader":{
                //"left_field":"id",
                //"right_field":"id",
                "level_field":"level",//当前菜单的级别1级菜单,2级菜单....
                "parent_id_field": "p_id",//数据里面的父级节点的名称
                //"leaf_field":"isLeaf",
                "expanded_field":"expanded",//是否展开子节点
                //"loaded":"loaded",
                "icon_field":"icon"
            },
            jsonReader: {  
                root: "values",  
                repeatitems : false  
            }, 
            "sortorder":"asc",
            "datatype":"json"
        }); 

我有一个问题,是否需要对数据进行排序才能显示出来? 测试时间,结果显示是乱,请,如何修改这个? enter image description here

1 个答案:

答案 0 :(得分:0)

重要的是要理解旧的jqGrid,商业Guriddo jqGrid JS(您当前使用的)和free jqGrid的当前实现假设输入数据中的项目的特定顺序。节点或叶子必须跟随其父节点。

ID为4到6的项目包含属性"p_id": "2"。这意味着一个必须移动项目直接放在项目"id": "2"之后(项目"id": "2"和项目{{1}之间}})。它应该解决您描述的问题。