用长数据生成树

Question

我正在开发使用 jhipster 创建的 spring boot 和 angular js 应用程序，在此我生成了类似

的树视图

• 根
  • Child_1
  • 孩子_2
    • Sub_Child_2_1
      • Sub_Child_2_1_1
  • 孩子_3
    • Sub_Child_3_1
  • Child_4
  • 孩子_5
    • Sub_Child_5_1
    • Sub_Child_5_2
    • Sub_Child_5_3 …… …… ......

在初始级别，我将加载具有两个级别的子级，即 root -> Child_1..2..3.. 稍后将根据要求加载 sub_child。树的深度不是固定的，它可能会有所不同。数据非常大。所以我无法在初始级别加载所有内容。

我想要扩展和折叠树的功能。

编辑：我试过 abn 树，但它引起了abn tree fail to show correctly when reach to level 9

中提到的问题

在我的 jhipster 应用程序中创建树以便轻松编辑的最佳解决方案是什么？

Answer 1

您可以在此处创建自定义指令以在您的数据上生成树结构。

Answer 2

您实际上可以使用模板：

树 JSON ：

$scope.tree = [
    {
        name: "Child 1"
    },
    {
        name: "Child 2",
        subs: [
            {
                name: "Subchild 2 1",
                subs: [
                    {
                        name: "Subchild 2 1 1"
                    }
                ]
            }
        ]
    }
];

HTML：

<script type="text/ng-template" id="myTemplate">
    <ul>
        <li ng-repeat="item in childs">
            {{ item.name }}
            <div ng-include="'myTemplate'" 
                 ng-if="item.subs"
                 ng-init="childs = item.subs"></div>
        </li>
    </ul>
</script>

<div ng-include="'myTemplate'" ng-init="childs = tree"></div>