Angular-tree-control的使用

需求:将具有层级的数据通过组织树的形式展现出来(样式如下图)

Angular-tree-control的使用_第1张图片

一、引入Angular-tree-control

1、在页面中引入Angular-tree-control的依赖:

2、将依赖添加到您的应用程序模块当中:

3、在DOM中添加Angular-tree:

说明:(1)若展示静态数据,DOM中的展示方式如下图(tree-model即为需要展示的数据数组,options用于为树添加数据,on-selection用于添加节点的选中状态,selected-node即为选中的节点)

Angular-tree-control的使用_第2张图片

说明:(2)若动态加载子集数据,DOM中的展示方式如下图(这里expanded-nodes的数据即为点击父级节点加载的子集数据的数组,而on-noe-toggle即为点击父级节点加载子集数据的方法)

Angular-tree-control的使用_第3张图片

4、为树添加数据:

说明:nodeChildren为树结构需要循环展示的数组,所以将循环的数组名字赋值给它;若要成功展示所有数据,则返回的数据必须是规则的结构,每一层级的数组名字必须是相同的(在这里循环的是数组children)。

Angular-tree-control的使用_第4张图片

Angular-tree-control的使用_第5张图片

5、到此一个完整的组织树就展示出来了。

6、参考文献:https://github.com/wix/angular-tree-control (可以在这里下载依赖)

 

 

你可能感兴趣的:(Angular)