Jqgrid Baum-Ansicht Adjacencey

Du code kleine simple Fehler, aber das größte problem, das Sie haben, ist, dass Ihr code vorgenommen werden, fügen Sie einfach Zeilen und nicht-Baum-Knoten. Sie können gehen auf die offizielle demo-Seite und wählen Sie unter "Neues in version 3.4" die demo "- Baum Grid-Nähe-Modell".

Schrieb ich die demo, die funktionieren genau wie die demo von der demo von der trirand demo-Seite, aber verwenden nur lokale Daten:

In den Fall, Sie haben zu erweitern die Objekte aus mydata mit den Eigenschaften 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}
];

Hier habe ich etwas modifiziert-id-Werte, denn die Punkte sollten nicht verwendet ids. Zusätzlich habe ich den expanded status des "Main Menu1" zu true zu demonstrieren nur, dass Sie expandiert einige Knoten automatisch sofort nach dem laden.

Modifizierte ich die jqGrid die definition der folgenden

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

Machte ich den 'id' - Spalte ausgeblendet und reduziert die grid-Größe. Hinzufügen, um die Daten, die ich verwendet addJSONData Methode, da es die Knoten im Baum

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

Als Ergebnis erhalten Sie

Sehen Sie die demo-live -hier.

AKTUALISIERT: Wenn Sie jqGrid version 4.0 oder höher ist es wichtig, sich loaded:true Eigenschaft für die Baum-Knoten, wenn Sie wollen, weiter ausgebaut haben. Zum Beispiel in dem obigen Beispiel die "Main Menu1" - Element ist ein Knoten ( isLeaf:false ), die angezeigt werden sollen ausgebaut (expanded:true), so sollte man hinzufügen loaded:true für die item-definition:

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

Weitere Beispiele siehe hier, hier, hier und hier.

AKTUALISIERT 2: Um die Sortierung korrekt zu verwenden parent:null oder parent:"null" statt parent:"" sehen hier für mehr details.

InformationsquelleAutor Oleg