jqgrid treegrid 数据格式

Question

我的环境：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

Answer 1

重要的是要了解旧 jqGrid 的当前实现，商业 Guriddo jqGrid JS (which you use currently) and free jqGrid 假定输入数据中项目的特定顺序。节点或叶子必须跟随其父节点。

id 为 4 到 6 的项目包含属性 "p_id": "2"。这意味着 必须移动 项目直接放在 项目"id": "2" 之后（在项目"id": "2" 之间）和项目 "id": "3")。它应该可以解决您所描述的问题。

jqgrid treegrid 数据格式

Jqgrid treegrid Data format

jquery

jqgrid

treegrid