用长数据生成树

Question

我正在处理使用jhipster创建的spring引导和角js应用程序，在这个过程中我生成了树视图，如下所示

• 根
  • Child_1
  • Child_2
    • Sub_Child_2_1
      • Sub_Child_2_1_1

​

​

- Child\_3  
    - Sub\_Child\_3\_1

​

- Child\_4
- Child\_5  
    - Sub\_Child\_5\_1
    - Sub\_Child\_5\_2
    - Sub\_Child\_5\_3 ...... ...... ......

​

​

在初始级别，我将加载两个级别的子级，即根-> Child_1..2..3。稍后，将根据需要加载sub_child。树的深度不是固定的，它可能会变化。数据非常大。所以我不能全部加载在初始水平。

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

编辑:我尝试过abn树，但是它引起了在：abn tree fail to show correctly when reach to level 9中提到的问题

在我的jhipster应用程序中创建树的最佳解决方案是什么，这样它就可以轻松编辑了？

Answer 1

您可以在这里创建自定义指令，以便在数据上生成树结构。

Answer 2

您实际上可以使用模板：

：

$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>