树结构是原型设计中常用的控件之一，常用于组织架构等功能。本文作者参照钉钉后台组织架构样式，使用Axure中继器实现动态树结构控件。

一、交互样式

初始样式（以钉钉后台-通讯录-组织架构为例）：

初始载入时，仅显示父节点；

添加子部门后，父节点出现三角箭头，且默认展开；

添加3级部门后，对应2级部门出现三角箭头，且默认不展开；

点击对应节点的的三角箭头，可切换展示下一级子节点；

点击添加子部门，弹出添加子部门弹出框；

点击编辑，弹出编辑弹出框，可修改部门名称、删除部门（父节点不允许删除）。

二、基本思路

• 通过节点序号进行定位与排序；
• 单击任意节点时，选中该节点的同时，记录该节点的序号、名称、下级节点数量、父节点序号；
• 根据选中节点判断该节点是否允许新增子节点，修改。

本例的难点在于：

• 新增、编辑、删除采用弹出框形式，而Axure中继器本身不支持跨页面传递数据，需要采用大量全局函数做数据存储与传递；
• 以判断当前节点的父节点序号为例，需要进行数据截取与拼接。

其余交互效果，虽然繁琐，但难度不大，细心耐心即可。

三、实现步骤