jqgrid carga datos json del servidor en treegrid no muestra datos

Question

Soy novato con jqGrid y tengo una jqGrid treeGrid con datos locales y todo está bien. Pero ahora estoy tratando de hacer lo mismo con datos JSON remotos y no puedo obtener treeGrid mostrar mis datos. Aquí está 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"
    },

y datos 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
            }
        }
    ]
}

No veo lo que estoy mal, así que espero que puedan brindarme ayuda y explicar mi error. Muchas gracias de antemano JiheL

Answer 1

En primer lugar, debe corregir los datos JSON:

• reemplace "parent": "" por "parent": "null" en el elemento raíz
• debe invertir los valores de la propiedad isLeaf : cambie todos true valores true a false y cambie todos false valores false a true
• deberías eliminar "cell" parte "cell" de todos los elementos
• El valor "records": 1 no corresponde a 4 elementos de datos. Supongo que el valor correcto debería ser "records": 4 , pero lo mejor será eliminar el pager de la lista de opciones de la cuadrícula. En la configuración de casos de cualquier page , el total o los records no serán importantes.

Puede simplificar más los datos y eliminar la parte de las rows de los datos JSON. En el caso tenemos que cambiar la propiedad root de jsonReader a root: function (obj) { return obj; } root: function (obj) { return obj; } . Como resultado, puede usar los siguientes datos JSON simples:

[
    {
        "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
    }
]

La demostración demuestra los resultados de los cambios. Después de extender la cuadrícula se ve como en la imagen de abajo

El código que utilicé en la demostración es:

$("#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"
});