Erstellen einer Baumstruktur in angularjs

Question

Ich möchte einen Baum in angularjs dynamisch erstellen, die Struktur wird wie folgt aus der Datenbank abgerufen.

[{ 
    "TreeName":"String content", 
    "Level":0, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":0, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":1, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":2, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":2, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":1, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":2, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":3, 

}], 
[{ 
    "TreeName":"String content", 
    "Level":1, 
}] 

Wenn Ebene 0 dann sein Hauptknoten und die Ebene 1 übergeordnete Knoten und Pegel 2 wird, dass die Eltern und Kind-Knoten der Ebene 3 werden, dass Childs Kind-Knoten und so weiter.

Ich habe viele Beispiele ausprobiert und funktioniert nicht, die einzige Sache ist, dass ich dachte, ich sollte eine Menge von if-Aussagen machen, aber ich brauche einen kürzeren und effizienteren Weg.

Answer 1

Sie können jsTree.jsTree ist jquery Plugin, das interaktive Bäume bietet. Es ist absolut kostenlos, Open Source und unter der MIT Lizenz vertrieben. jsTree ist einfach zu erweitern, zu bearbeiten und konfigurierbar, es unterstützt HTML & JSON-Datenquellen und AJAX-Laden. Sie können mehr Details über https://www.jstree.com/

Hier ist der Code

$('#jstree_demo').jstree({ 
    "core" : { 
    "animation" : 0, 
    "check_callback" : true, 
    "themes" : { "stripes" : true }, 
    'data' : { 
     'url' : function (node) { 
     return node.id === '#' ? 
      'ajax_demo_roots.json' : 'ajax_demo_children.json'; 
     }, 
     'data' : function (node) { 
     return { 'id' : node.id }; 
     } 
    } 
    }, 
    "types" : { 
    "#" : { 
     "max_children" : 1, 
     "max_depth" : 4, 
     "valid_children" : ["root"] 
    }, 
    "root" : { 
     "icon" : "/static/3.3.2/assets/images/tree_icon.png", 
     "valid_children" : ["default"] 
    }, 
    "default" : { 
     "valid_children" : ["default","file"] 
    }, 
    "file" : { 
     "icon" : "glyphicon glyphicon-file", 
     "valid_children" : [] 
    } 
    }, 
    "plugins" : [ 
    "contextmenu", "dnd", "search", 
    "state", "types", "wholerow" 
    ] 
}); 

Auch finden Sie Demo arbeiten https://www.jstree.com/demo/

ist und hier ist das Format der Daten jstree https://www.jstree.com/docs/json/