Jqgrid Arborescence Adjacencey

Vous code simple petite erreur, mais le principal problème que vous avez, c'est que votre code pour ajouter des lignes simples et pas les nœuds de l'arborescence. Vous pouvez aller sur la démo officielle de la page et choisissez dans "Nouveau dans la version 3.4," la démo "Grille Arbre d'Adjacence modèle".

J'ai écrit la démo qui fonctionnent exactement comme la démo de la démo de l'trirand page de démonstration, mais utilisation des données locales:

Dans votre cas vous devez prolonger les objets de mydata avec les propriétés level, parent, isLeaf, expanded:

var mydata = [
    {id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1",
     level:"0", parent:"", isLeaf:false, expanded:false},
    {id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1",
     level:"1", parent:"1", isLeaf:false, expanded:false},
    {id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1",
     level:"2", parent:"1_1", isLeaf:true, expanded:false},
    {id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1",
     level:"1", parent:"1", isLeaf:true, expanded:false},
    {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2",
     level:"0", parent:"", isLeaf:false, expanded:true},
    {id:"2_1",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
     level:"1", parent:"2", isLeaf:true, expanded:false},
    {id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
     level:"1", parent:"2", isLeaf:true, expanded:false},
    {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3",
     level:"0", parent:"", isLeaf:false, expanded:false},
    {id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
     level:"1", parent:"3", isLeaf:true, expanded:false},
    {id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
     level:"1", parent:"3", isLeaf:true, expanded:false}
];

Ici, j'ai un peu modifié les valeurs d'id, car les points ne doivent pas utilisé dans les id. De plus, j'ai mis le expanded statut de "Menu1" à true de démontrer seulement que vous pouvez élargi certains nœuds automatiquement immédiatement après le chargement.

J'ai modifié le jqGrid définition à la suite de

$("#treegridsamp").jqGrid({
    datatype: "local",
    data: mydata, //will not used at the loading,
                  //but during expanding/collapsing the nodes
    colNames:['id','Name','MenuId','Menu Name'],
    colModel:[
        {name:'id',index:'id',width:100,hidden:true},
        {name:'Name',index:'Name',width:150},
        {name:'MenuId',index:'MenuId',width:100},
        {name:'MenuName',index:'MenuName',width:100}
    ],
    height:'auto',
    //pager : "#ptreegrid",
    sortname: 'id',
    treeGrid: true,
    treeGridModel: 'adjacency',
    treedatatype: "local",
    ExpandColumn: 'Name',
    caption: "Sample Tree View Model"
});

J'ai fait la 'colonne' id cachés et réduit la taille de la grille. Pour ajouter les données que j'ai utilisé addJSONData méthode, car il va définir l'arborescence de nœuds

$("#treegridsamp")[0].addJSONData({
    total: 1,
    page: 1,
    records: mydata.length,
    rows: mydata
});

Que le résultat vous recevrez

Vous pouvez voir la démo en direct ici.

Mis à JOUR: Si vous utilisez jqGrid version 4.0 ou supérieur, il est important de définir loaded:true propriété pour les nœuds de l'arborescence si vous voulez avoir élargi. Par exemple, dans l'exemple ci-dessus le "Menu1" le point est un noeud (isLeaf:false) qui doit être l'affichage étendu (expanded:true), donc on doit ajouter loaded:true pour l'élément de définition:

{id:"2", Name:"Main Menu1", MenuId:"2", MenuName:"Menu2",
 level:"0", parent:"", isLeaf:false, expanded:true, loaded:true}

Pour plus d'exemples, voir ici, ici, ici et ici.

Mise à JOUR 2: Pour avoir le tri fonctionne correctement il faut utiliser parent:null ou parent:"null" au lieu de parent:"" voir ici pour plus de détails.

OriginalL'auteur Oleg