jqGrid treeGrid Développer Réduire ne fonctionne pas

Question

Je suis en train d'essayer de configurer un treeGrid en utilisant jqGrid 4.2.1 après quelques travaux visuels cela semble correct, mais l'expansion de l'effondrement ne fonctionne pas. Seule l'icône bascule, mais les groupes restent visibles.

La configuration est la suivante

$("#list").jqGrid({ 
       treeGrid: true, 
       treeGridModel: 'adjacency', 
       ExpandColumn: 'BreakdownTag', 
       ExpandColClick: true, 
       url: '/AsyncData/Breakdown.ashx', 
       datatype: 'json', 
       mtype: 'GET', 
       colNames: ['Superior Tag', 'Breakdown Tag', 'Tag Description'], 
       colModel: [ 
        { name: 'SuperiorTag', id: 'SuperiorTag', index: 0, width: 250, 
hidden: true, align: 'left', sortable: false, classes: 'indeling', title: false }, 
        { name: 'BreakdownTag', id: 'BreakdownTag', index: 1, width: 250, 
align: 'left', sortable: false, classes: 'indeling', title: false, visible: false }, 
        { name: 'TagDescription', id: 'TagDescription', index: 2, width: 250, 
align: 'left', sortable: false, classes: 'indeling', title: false },], 
       rowNum: 20000, 
       viewrecords: true, 
       loadui: "disable", 
       emptyrecords: "Geen data gevonden...", 
       height: "100%", 
       treeIcons: { leaf: 'ui-icon-document-b' }, 
       loadonce: true, 
       hoverrows: false 
} 

      }); 

L'objet JSON est:

{ 
    "total": 1, 
    "page": 1, 
    "records": 3, 
    "rows": [ 
     { 
      "i": 1, 
      "cell": [ 
       "", 
       "First", 
       "Description for First", 
       0, 
       "null", 
       false, 
       true, 
       true 
      ] 
     }, 
     { 
      "i": 2, 
      "cell": [ 
       "First", 
       "Second", 
       "Description for Second", 
       1, 
       "First", 
       false, 
       true, 
       true 
      ] 
     }, 
     { 
      "i": 3, 
      "cell": [ 
       "Second", 
       "Third", 
       "Description for Third", 
       2, 
       "Second", 
       false, 
       true, 
       true 
      ] 
     } 
    ] 
} 

Comme l'a dit tout Ooks ok visuelle jusqu'à ce que cliquer sur un nœud pour le réduire (evreything montre expandend) les bascules icône, mais les lignes restent visibles. Je suis un peu clueless en ce moment ...

Answer 1

Il y a deux erreurs dans les données JSON et une erreur mineure dans le code JavaScript.

Dans JSON dada, vous devez utiliser id au lieu de i comme ID d'élément. Pour spécifier l'élément parent, vous devez utiliser le id au lieu de la valeur de la colonne « BreakdownTag » (utiliser 2 au lieu de « deuxième » dans l'exemple ci-dessous):

{ 
    "i": 3, 
    "cell": [ 
     "Second", 
     "Third", 
     "Description for Third", 
     2, 
     "Second", 
     false, 
     true, 
     true 
    ] 
} 

devrait être fixé à

{ 
    "id": 3, 
    "cell": [ 
     "Second", 
     "Third", 
     "Description for Third", 
     2, 
     2, 
     false, 
     true, 
     true 
    ] 
} 

Une erreur JavaScript supplémentaire supplémentaire est l'utilisation de la virgule de fin à la fin de colModel. La combinaison },] doit être remplacée par .

The demo fonctionne correctement après les modifications.