Jqgrid treegrid Data format

Question

my surroundings：jqgrid 5.1 ，php 5.3

my data：

{
"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

}

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

I have a question，Whether the data needs to be sorted in order to show it？ Test time, the results show is chaos, please, how to modify this? enter image description here

Answer 1

It's important to understand that the current implementation of old jqGrid, commercial Guriddo jqGrid JS (which you use currently) and free jqGrid suppose specific order of items in the input data. The nodes or leafs have to follow its parent node.

The items with ids from 4 till 6 contains the property "p_id": "2". It means that one have to move the items to place there directly after the item "id": "2" (between the item "id": "2" and the item "id": "3"). It should fix the problem, which you describes.