Question

我正在使用jhipster创建的spring boot和angular 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 ...... ...... ......

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

我想要扩展树并折叠功能。

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

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

Answer 1

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

Answer 2

您实际上可以使用模板：

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

生成包含长数据的树

2 个答案: