友情提示：图片看不清请点击鼠标右键，查看图像

一、需求分析

1、后端以数组形式返回树的所有节点数据，每个节点数据格式如下：

2、我们只需要关心节点与节点之间的连接属性parentId即可，其他属性无需关心，parentId会指明当前节点关联的父级节点id号

3、这里我基于primeng控件库的p-tree配置进行演示（ps：primeng是angular4接近最全的控件库），关于primeng请查看primeng官网

4、这里我给出p-tree渲染树所需要的数据配置

5、看完p-tree的数据配置，我们只需要将节点的子节点添加进该节点的children属性对应的字段里面（ps：市面上的树的渲染配置都是大同小异）

二、拼树的具体实现

1、这里我展示一下如何拼出这棵树需要的渲染配置（所有的逻辑我都进行了备注，这里省略了业务相关的其他代码，比如加图标）

2、下面是p-tree依据组合成功的数据进行渲染的结果

更多相关文章

1. 使用php Ajax在数据库中插入动态数据
2. js之DOM操作（访问父节点parentNode）
3. 如何使用客户端Javascript数组并通过节点发布。将js API插入Mong
4. 是否可以从节点js中的同一模块导出构造函数和一些正常函数？
5. 如果外部应用程序更改了持久模型(服务器数据库)，AngularJS可以自
6. 如何在rails中使用ajax将数据从控制器传递到视图
7. Javascript来自数据库的图像上的图像映射
8. python数据类型二（列表和元组）
9. 将敏感数据存储在数据库中，建议

随机推荐

1. Android 在界面中显示以及输入文本信息 T
2. android ListView控件 去上下滑动阴影 选
3. android udp通信
4. 【android】关于退出时关闭“后台”显示
5. Ubuntu 系统上编译Android 系统
6. [置顶] Android进程间通信AIDL的使用分析
7. Android音视频处理之MediaExtractor
8. 求助: Android 加载 webview, 点击webvie
9. android 布局文件属性说明
10. Android imageView 属性知识