classification: 实战axure
title: 使用repeater实现一个复杂的树状结构
author: BigPolo
Date: 2020年12月1日
axure中使用repeater实现一个复杂的树状结构
1. 树形结构需求
这个树状结构是Jeecg Boot架构中的一个树状结构，具体需求为：
1. 实现树状结构的分级并能进行逐级展开与收起操作；
2. 复选框进行多选操作；
3. 文字实现点击单选操作；
4. 可以进行新增、删除、修改等操作；
5. 当选择部分下级节点时，上级节点显示为部分选择状态；当选择全部下级节点，上级节点显示为选中状态；当取消所有下级节点选择时，上级节点显示为未选中状态；
6. 当选中上级节点时，其所有下级节点自动更新为选中状态；当取消选中上级节点时，其所有下级节点自动更新为未选中状态。
4.5.6.三个需求因为实现起来比较复杂，对于原型阶段实现的投入产出比不高，所以本文主要讨论前三个需求，另外当树状结构的节点级别太多，需要遍历算法，实在是有些为难axure和原型设计人员（作者）了，为了少死脑细胞，本文的树形结构只实现三级树状结构，也没有用复杂的算法。
2. 准备组件
整个树状结构的组件如下图所示：
组件的摆放如图所示：
其中repeater内的组件摆放如下图：
-
repeater
repeater的主要功能用以加载树状结构的各项数据，并实现树形结构的展示。
repeater的数据结构在下一节中介绍。本节主要介绍组件构成。
主要包括一个箭头组件、一个checkbox组件和一个label组件。
这几个组件可以用axure自带的组件库，也可以自行设计，为了相对美观，我采用了自己设计的箭头组件和checkbox组件。
1.1. 箭头组件
箭头组件我采用动态面板中加载图形的方式。
动态面板分为两个状态：down和right，分别代表展开模式和收起模式。
其实箭头组件可以直接用一个图片实现，通过组件的rotate方法实现两种状态，我这种方式主要是个人习惯，认为动态面板能够更灵活的操作组件。
动态面板设置为fit to content，其实这里不设置也无所谓，因为两张图片的大小一致。
1.2. checkbox组件
同样checkbox用图片设计，之所以没有用axure自带的checkbox，主要是因为个人认为axure的checkbox有点丑，难以达到界面要求。
根据需求设置三种样式效果：
1.3. label组件
label组件可以直接用axure自带的组件，根据需求设置字体大小颜色等。
同样设置两种样式效果：
- 动态面板
在树状结构中有一个命名为pnl-control的动态面板，它是作为repeater外部的控制组件存在，根据需求设计了五个状态，可以实现三级节点的操作，如果需要更多节点的操作，需要添加更多的状态。各个状态的作用及如何设置事件请接着往下看。
- label组件
在树形结构中有两个label组件，它们的作用主要是为repeater传递控制参数，两个参数主要是当前的节点名称和节点级别（不要纠结命名）。
3. 实现步骤
3.1. 实现树状结构分级并进行展开收起操作
step1.
设置repeater的数据结构和 Item Loaded事件，实现树状结构布局。
- repeater的数据结构
前三个参数主要是节点名称，我采用了笨办法，对各级节点需要将它的所有上级节点列出；
level字段代表当前节点的级别；
icn_sta字段代表当前节点的箭头组件状态，其中d代表展开状态，箭头向下；r代表收起状态，箭头向右；n代表隐藏箭头不显示。初始化的数据我默认为树状结构是展开状态，所以所有的icn_sta字段都是d或者n，没有r状态。
isshown字段代表是否隐藏当前节点。
- 设置repeater的
item loaded事件
事件由四部分组成，第一部分根据节点级别加载节点文字并设置文字label的尺寸
第二部分根据节点级别进行缩进
第三部分设置箭头组件的状态
第四部分则确定是否应该显示该节点
step2.
设置repeater的控制组件（动态面板）的panel state changed事件，通过外部组件实现对repeater的数据更新，实现树状结构的展开收起效果。
在step1中只是初始化树状结构，这一步则是为树状结构制造一个开关，当触发这个开关的时候，树状结构实现展开/收起样式的变化。
在准备组件中我们创建了一个名为pnl-control的动态面板，我们就通过这个动态面板状态的改变，来实现展开/收起操作。
为pnl-control创建panel state changed事件，当动态面板的状态发生改变时更新repeater的数据并重新加载。
其中两个局部变量LVAR1和LVAR2分别代表当前节点级别和当前节点名称两个label组件的文字值。
step3.
设置repeater组件中箭头组件的click or tap事件，实现树状结构的展开收起操作。
前两步实现了树状结构的展示方式和开关，这一步就用以实现什么时候，怎么去触发开关。
分别定义repeater中的展开/收起动态面板中的（两个！）图片的click or tap事件。
down状态下箭头图片点击操作：
- 首先实现向节点名称和节点级别两个label的参数传递；
- 然后更新repeater的箭头状态字段；
- 最后改变pnl-control面板状态，触动pnl-control开关，更新当前节点的各种显示状态，实现树状结构的展开/收起操作。
同理，设置right状态下箭头图片的点击事件。
现在可以预览设计的树状结构，看看它的展开、收起操作了！
3.2. 实现复选框的多选操作与文字的单选操作
复选框的多选操作很简单，只要设置好checkbox的样式效果，设置click or tap事件
文字的单选操作稍微复杂一些，在设置好label的样式效果和click or tap事件后，还需要为label创建selection group:
⚠️：最重要的是要在repeater交互属性中取消掉isolate radio groups和isolate selection groups两个选项的勾选，不然无法实现单选操作！
4. 实现效果
我不会录屏，只能截图，其中食堂颜色变化是因为鼠标悬停在上边。
5. 总结
在实现过程中遇到不少问题，一开始想不出解决方案，所以在制作的原型中最终选择了最原始的树状结构设计，就是采用传统的组件的show/hide方法逐个在原型增加组件，所以一个像模像样的树状结构要非常大量的组件才能实现，最后对axure的repeater组件深入思考后才在给客户交付原型后想明白，最终实现了这个树形结构的设计。
问题一. 为什么不在repeater内的箭头组件的click or tap事件中直接实现展开收起操作？
问题二. 为什么要在控制组件中的每个数据操作状态后都增加一个跳转到空状态的方法实例？
其实这个树状结构还是有缺陷的，比如当进行选中操作后紧接着进行展开/收起操作，所有的选中状态都会被清除，其实也能够解决这个问题，增加repeater的控制数据就可以，但是觉得作为给甲方演示的组件，关键部分的设计展示出来就完全可以了。
当然，这个树状结构还可以不断完善，实现诸如展开时向下推下方的组件，收起时拉下方的组件，或者将树状结构限定在一定显示范围等等，这需要根据操作需求进行进一步设计。