在angularjs中构建树结构

Question

I would like to build a tree dynamically in angularjs, the structure is retrieved as follows from the database.

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

If level 0 then its main node and level 1 becomes parent node and level 2 becomes that parents child node and level 3 becomes that childs child node and so forth.

I have tried many examples and doesnt work, the only thing is that I thought was to do a lot of if statements but i need a shorter and more efficient way.

Answer 1

You can use jsTree.jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading. You can find more detail on https://www.jstree.com/

Here is the 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"
  ]
});

Also you can find working demo on https://www.jstree.com/demo/

And here is the format of data to use jstree https://www.jstree.com/docs/json/