AngularJS:可扩展的递归树表

Question

我正在研究角度数据树递归表.因此,想法是抛出树数据(不知道树的部门)并使用可扩展节点正确地将树渲染为表.现在我通过递归调用模板在表格内创建一个表,成功地完成了树表

这是代码,你可以在这里看到它: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

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

演示:可扩展网格

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

提供树结构数据,列定义和要扩展的属性.

提供树结构数据,列定义以及要在控制器中展开的属性.

 $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

Answer 2

在此处添加 ng-if

<div id="expanded-data" data-ng-if="childrenVisible">

并为您的树项提供一个属性，该属性定义其子项的可见性。默认情况下设置属性 true 或 false（如果你想要 false 只是不要默认添加它）并实现一个 toggleChildren 函数，该函数通过单击 toggleButton（文件夹）调用

scope.toggleChildren = function () {
    scope.item.childrenVisible = !scope.item.childrenVisible;
}

编辑：//现在更改文件夹（打开或关闭） http://jsfiddle.net/8f3rL/35/