可能是 Axure 中继器实现树形结构的最简单教程

网上看了几个关于中继器实现树形结构的教程，感觉都略显复杂，所以动手做了一个，应该算是目前来讲用中继器实现树形结构最简单的方式了，先看看效果。

接下来上教程。

先在工作区添加一个中继器，中继器內的元件如下：

画个图会更清晰一点：

最外层是一个中继器，命名为“树”；

第二层是一个动态面板，只有一个状态，命名为“节点”；

“节点”內有一个动态面板，命名为“箭头方向”，还有一个文本，命名为“节点名称”；

“箭头方向”动态面板內有两个状态，分别命名为“展开”和“折叠”，里面分别放了一个向下和向右的箭头，用来呈现节点展开和折叠起来时箭头的状态。

接下来看看中继器的结构和部分数据，这里我配置了一个3层的树形结构：

字段和说明如下：

• node_id：节点的唯一标识，注意节点 id 的命名方式，这样命名，不仅能够在维护数据时一眼就看明白节点间的父子关系，还有另外一个好处，后面会说明。
• node_name：节点名称，Axure 10 可以直接连接到“节点名称”的元件，如果是 Axure 9 及以前的版本，需要通过设置交互事件来显示。
• node_level：节点等级，标识当前节点在树中属于第几级。
• parent_node_id：当前节点的父节点的唯一标识。
• arrow：箭头显示状态，y=显示，n=隐藏，配置数据的时候，有子节点的配置为 y，没有子节点的配置为 n。
• arrow_status：箭头方向，用来控制“箭头方向”动态面板状态的切换，以便能够根据节点的展开、折叠状态正确显示箭头方向，0=折叠，1=展开，这里初始展开全部节点，因此全部配置为1。
• show：用来控制节点的显示和隐藏，y=显示，n=隐藏，这里初始显示所有节点，因此全部配置为 y。

配置完数据后的初始效果是这样的：

接下来开始添加交互。

节点控制

节点有两个属性，一个是节点显示和隐藏，另外一个就是子节点的缩进。

显示和隐藏这个容易，只需要根据“show”的值来判断即可。

至于缩进，我们可以假设每个子节点相对于父节点缩进 15 个单位，则父节点缩进 15，子节点缩进 30，孙子节点缩进45......讲到这里，不知道你注意到没有，这里的倍数关系，刚好等于中继器中的节点等级“node_level”，如此一来，这个交互我们就可以写了。

找到中继器內的“节点”动态面板，添加载入交互，如果“show = y”，就显示节点，并且横向（改变 x 值）缩进（移动）“node_level * 15”个单位，如果“show = n”，直接隐藏：

配置后就得到一棵我们常见的“树”：

箭头交互

箭头有 3 个交互，分别是：

1. 如果一个节点没有子节点，需要隐藏箭头，这个可以通过中继器中的“arrow”值来判断。
2. 点击箭头的时候切换箭头展开和折叠状态，这个可以通过切换动态面板的状态来完成。
3. 切换箭头的时候，根据展开和折叠状态，展开和收起子节点，这个是最难的一个点，但也不复杂，稍后讲。

首先判断显示状态和折叠展开状态，找到“箭头方向”的动态面板，添加载入事件，这里分了以下场景：

1. 当箭头 arrow = y 时，表示需要显示箭头，此时除了显示箭头以外，还需要根据箭头状态 arrow_status 的值来判断当前的节点是处于展开状态还是折叠状态，如果 arrow_status = 1，表示展开，需要设置“节点”的动态面板切换到“展开”状态，如果 arrow_status = 0，则表示折叠，需要设置动态面板切换到“折叠状态”。
2. 如果 arrow = n，则表示当前节点没有子节点，直接隐藏箭头。

配置后效果如下：

可以发现那些没有子节点的节点的箭头都隐藏掉了。

接下来是点击箭头的交互，只需要在点击时循环切换“箭头方向”的动态面板的状态就好了：

效果如下：

接下来就是重点了，就是如何展开、折叠子节点。

由于我们是通过点击“箭头方向”的动态面板来切换展开、折叠状态的，因此，我们可以在“箭头方向”的动态面板状态改变时进行判断：

展开比较简单，实际上就是将当前节点的所有子节点显示出来，在中继器中，每个节点都有对应的父节点 id，因此，展开时，只需要将父节点 id = 当前节点 id 的节点的“show”改为“y”，将节点显示出来即可。

注意，这里还需要同时调整当前节点的箭头状态的值，改为“1”，确保箭头能切换到正确的状态：

折叠就复杂了，因为折叠不止需要折叠子节点，还需要折叠孙子节点，如果有 n 个孙子节点，通过父子 id 的关系来索引是很难做到的，所以这里用了一个巧妙的方法。

上文提到过，中继器中的 node_id 的命名方式是有特殊意义的，仔细观察可以发现，每个子节点的 id 前面都带有其父节点的 id，也就是说，无论多少子、孙节点，都能知道其“父”是谁，因此我们可以拿这个 node_id 的特点来“做文章”，折叠某个节点的时候，如果其他节点的 node_id 是以当前节点的 node_id 开头的，表示这个节点就是当前节点的子、孙节点，则可以直接将这些节点的 show 设置为“n”进行隐藏，同时将所有节点的箭头状态 arrow_status 设置为“0”进行折叠，防止展开时箭头状态错误。最后同样需要修改当前节点的箭头状态：

公式有点长，这里解释一下，indexOf 是返回目标字符串在另外一个字符串中第一次出现的位置，这里等于0就是表示出现在开头位置；但是这种匹配方式会将当前节点也匹配到，所以需要增加目标节点的 index 大于当前节点的 index 的判断条件，这样一来，便可以将当前节点过滤掉，我们所需要的效果就实现了：

以上便是本文的全部内容，感谢阅读！