javascript - AngularJS : Expandable recursive tree table

Question

我正在研究 Angular 数据树递归表。所以我们的想法是，抛出树数据(不知道树的部门)并将树渲染为具有可扩展节点的表格。现在我通过递归调用模板在表内创建表来成功完成树表

这是代码，或者您可以在此处查看它的运行情况:jsfiddle

<script type="text/ng-template"  id="tree_item.html">

   <tr style="width:100%">
      <td><i class="fa fa-folder-open"></i></td>
      <td>
            {{data.name}}

        <div id="expanded-data">
            <table class="table table-striped" id="nested-table">
                    <div ng-repeat="data in data.nodes" ng-include="'tree_item.html'">     </div>
            </table>
        </div>
    </td>
</tr>

</script>


 <table class="table table-striped">
 <thead>
    <tr>
        <th style="width:30px;"><i ng-click="loadItems()" class="fa fa-refresh blueicon"></i></th>
        <th style="width:auto">Data tree</th>
    </tr>
</thead>
<tbody ng-repeat="data in treeData" ng-include="'tree_item.html'">

</tbody>

</table>

现在我陷入了下一步，即当您单击文件夹图标时启用切换展开和折叠，然后将子节点设置为 display= none。

我尝试过使用 ng-switch 但没有成功。你们有什么想法如何做到这一点吗？

谢谢:)

Answer 1

您可以考虑使用树形网格。

演示: expandable grid

  <tree-gird tree-data="tree_data"></tree-grid>

提供树形结构数据、列定义和要扩展的属性。

提供树形结构数据、列定义和要在 Controller 中扩展的属性。

 $scope.tree_data = [
   {Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
  children:[
    {Name:"California", Area:423970,Population:38340000, TimeZone:"Pacific Time",
        children:[
            {Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
            {Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
        ]
    },
    {Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
        children:[
            {Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
        ]
     }
   ]
  },    
  {Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
];

您可以选择定义列定义以及要使用展开和折叠的属性

$scope.col_defs = [
   { field: "Description"},
   { field: "DemographicId", displayName: "Demographic Id"},
   { field: "ParentId", displayName: "Parent Id"},
   { field: "Area"},
   { field: "Population"},
   { field: "TimeZone", displayName: "Time Zone"}
];


$scope.expanding_property = "Name";

详情:https://github.com/khan4019/tree-grid-directive