在angularjs中構建樹結構

Question

我想在angularjs中動態構建樹，從數據庫中檢索結構如下。

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

如果級別0，則其主節點和級別1成為父節點，級別2成為該父子節點，而級別3成為該子節點，依此類推。

我已經嘗試了許多示例，但沒有用，唯一的是，我認為應該做很多if語句，但是我需要一種更短，更有效的方法。

Answer 1

您可以使用jsTree.jsTree是jquery插件，它提供交互式樹。 它是完全免費的，開源的，並根據MIT許可進行分發。 jsTree易於擴展，可定義和配置，它支持HTML和JSON數據源以及AJAX加載。 您可以在https://www.jstree.com/上找到更多詳細信息

這是代碼

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

您也可以在https://www.jstree.com/demo/上找到有效的演示

這是使用jstree https://www.jstree.com/docs/json/的數據格式