axure商城

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

下载教程源文件(密码:0000)>

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

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

接下来上教程。

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

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

画个图会更清晰一点:

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

最外层是一个中继器,命名为“树”;

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

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

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

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

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

字段和说明如下:

  • 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。

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

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

接下来开始添加交互。

节点控制

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

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

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

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

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

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

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

箭头交互

箭头有 3 个交互,分别是:

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

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

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

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

配置后效果如下:

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

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

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

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

效果如下:

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

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

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

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

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

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

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

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

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

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

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

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

以上便是本文的全部内容,感谢阅读!

给TA打赏
共{{data.count}}人
人已打赏
Axure教程基础教程

一个可能99.9%的人不知道的Axure功能

2024-3-15 16:27:34

Axure教程基础教程

Axure Cloud组织功能Organizations简介

2024-3-29 17:43:04

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索