jqgrid从服务器将json数据加载到treegrid中不会显示数据 [英] jqgrid loading json datas from server into treegrid doesn't display datas

问题描述

我是jqGrid的新手，我已经用本地数据构建了一个jqGrid treeGrid，一切都很好. 但是现在我试图对远程JSON数据做同样的事情，但是我无法获得treeGrid显示我的数据. 这是treeGrid conf:

I'm newbie with jqGrid and I have build a jqGrid treeGrid with local datas and all is fine. But now I'm trying to do same thing with remote JSON datas and I can't obtain treeGrid display my datas. Here is treeGrid conf :

$("#"+subgrid_table_id).jqGrid({ 
    url:"sg511e.php?id="+row_id+"&btr="+btr, 
    datatype:"json",
    mType:'POST',
    loadui: "disable",
    colNames:['id','Prestations'],
    colModel:[
        {name:'id',index:'id',width:100,hidden:true},
        {name:'name',index:'name',width:785,sortable:false}
    ],
    pager: pager_id, 
    sortname: 'id', 
    sortorder: "asc", 
    hiddengrid:true,
    gridview: true,
    treeGrid:true,
    treeGridModel: "adjacency",
    treedatatype: 'json',
    ExpandColumn: 'name',
    jsonReader: {
        repeatitems: false,
        root: "rows"
    },

和JSON数据:

{
    "page": 1,
    "total": 1,
    "records": 1,
    "rows": [
        {
            "cell": {
                "id": "1",
                "name": "ECHANGEUR",
                "level": "0",
                "parent": "",
                "isLeaf": true,
                "expanded": false,
                "loaded": true
            }
        },
        {
            "cell": {
                "id": "1_1",
                "name": "Intervention Aller sur Site",
                "level": "1",
                "parent": "1",
                "isLeaf": true,
                "expanded": false,
                "loaded": true
            }
        },
        {
            "cell": {
                "id": "1_1_1",
                "name": "Date et heure d'arrivée sur le site",
                "level": "2",
                "parent": "1_1",
                "isLeaf": false,
                "expanded": true,
                "loaded": true
            }
        },
        {
            "cell": {
                "id": "1_1_2",
                "name": "Consignation de l'échangeur",
                "level": "2",
                "parent": "1_1",
                "isLeaf": false,
                "expanded": true,
                "loaded": true
            }
        }
    ]
}

我看不到我的错，因此希望您能提供一些帮助并解释我的错误. 提前谢谢了 吉禾L

I don't see what I'm wrong so I hope you can bring some help and explain my error. Many thanks in advance JiheL

推荐答案

首先，您应该修复JSON数据:

First of all you should fix the JSON data:

在根元素中
• 将"parent": ""替换为"parent": "null"
• 您应该反转isLeaf属性的值:将所有true值更改为false，并将所有false值更改为true
• 您应该从所有项目中删除"cell"部分
• 值"records": 1不对应4项数据.我想正确的值应该是"records": 4，但是最好的方法是从网格的选项列表中删除pager.对于任何page，total或records都不重要.

• replace "parent": "" to "parent": "null" in the root element
• you should invert the values of isLeaf property: change all true values to false and change all false values to true
• you should remove "cell" part from all items
• The value "records": 1 don't corresponds 4 items of data. I suppose that the correct value should be "records": 4, but the best will be to remove the pager from the list of options of the grid. In the case setting of any page, total or records will be not important.

您可以进一步简化数据，并从JSON数据中删除rows部分.在这种情况下，我们必须将jsonReader的root属性更改为root: function (obj) { return obj; }.结果，您可以使用以下简单的JSON数据:

You can more simplify the data and remove the rows part from JSON data. In the case we have to change the root property of jsonReader to root: function (obj) { return obj; }. As the result you can use the following simple JSON data:

[
    {
        "id": "1",
        "name": "ECHANGEUR",
        "level": "0",
        "parent": "null",
        "isLeaf": false,
        "expanded": false,
        "loaded": true
    },
    {
        "id": "1_1",
        "name": "Intervention Aller sur Site",
        "level": "1",
        "parent": "1",
        "isLeaf": false,
        "expanded": false,
        "loaded": true
    },
    {
        "id": "1_1_1",
        "name": "Date et heure d'arrivée sur le site",
        "level": "2",
        "parent": "1_1",
        "isLeaf": true,
        "expanded": true,
        "loaded": true
    },
    {
        "id": "1_1_2",
        "name": "Consignation de l'échangeur",
        "level": "2",
        "parent": "1_1",
        "isLeaf": true,
        "expanded": true,
        "loaded": true
    }
]

演示演示了更改的结果.扩展网格后，如下图所示

The demo demonstrate the results of the changes. After extending the grid looks like on the picture below

我在演示中使用的代码是:

The code which I used in the demo is:

$("#grid").jqGrid({
    url: "user2132268.json",
    datatype: "json",
    colNames: [ 'id', 'Prestations'],
    colModel: [
        {name: 'id', width: 100, key: true, hidden: true},
        {name: 'name', width: 785, sortable: false}
    ],
    sortname: 'id',
    sortorder: "asc",
    hiddengrid: true,
    gridview: true,
    treeGrid: true,
    treeGridModel: "adjacency",
    ExpandColumn: 'name',
    ExpandColClick: true,
    jsonReader: { repeatitems: false, root: function (obj) { return obj; } },
    height: "auto"
});

这篇关于jqgrid从服务器将json数据加载到treegrid中不会显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！