编辑导语：在多分组的筛选场景下，树形穿梭框较为常用，一般应用于数据、名单的选择。那么，应该如何制作树形穿梭框？本篇文章里，作者总结了一份树形穿梭框的Axure教程，一起来看一下。

树形穿梭框常用于多分组之间的筛选，例如从多个营业厅、多个部门中选择优秀员工，又或者从不同的班级里面挑选学生比赛。树形穿梭框就能应用于多分组条件中选择具体数据、名单的情况。

下面我会通过评选积极员工的树形穿梭框为案例教程，矩形效果如下图所示：

原型地址：https://hak3nz.axshare.com/#g=1

一、主要材料

1. 树元件

即左上角营业网点部分的元件，我们用axure里面原生的树元件即可。

2. 中继器1（员工名单）

即右上角员工名单的中继器，中继器内部是多选框组成。中继器表格有4列组成：

• Column1——代表该员工所在的营业厅，对应上面树元件的营业厅；
• Column2——代表员工姓名；
• Column3——代表员工职位；
• xuanzhong——代表多选框是否选中，默认为空即可。

3. 中继器2（已选名单）

即下面已选名单内容，中继器内部由矩形和关闭按钮X组成。中继器表格内仅需要一列Column0，代表员工姓名既可以。

二、思路讲解

这个原型主要是通过选择树节点（选择对应的营业厅），根据不同的营业厅，筛选出该营业厅下对应的员工；然后在员工名单中选中员工后，出现在已选名单中，如果取消选中，则消失在已选名单中；如果在已选名单中取消员工，那么也应该在员工名单中取消选中。

这个原型主要涉及以下的交互逻辑：

1. 筛选——筛选出选中营业厅下对应的员工；
2. 两个中继器之间的交互，两个中继器之间值的传递。

三、交互制作

1. 树元件的交互

当鼠标单击树节点时（营业厅节点），添加对中继器1（员工名单的中继器）筛选事件，筛选条件为中继器1的Column1的值等于当前鼠标单击的树节点的值相同。因为有很多个树节点（营业厅），所以我们用this.text，这样就可以直接将这个交互复制粘贴到所有的树节点。

默认显示的营业厅，例如案例的第一个天河区营业厅，在载入是还需要用到触发事件，触发当前节点鼠标单击时的交互。

2. 中继器1（员工名单的中继器）的交互

在中继器1每项加载时，我们将多选框的文字设置为中继器第二列员工姓名和第三列员工职位的值，例如员工姓名1（客户经理），你们也可以根据实际需要显示的内容来设置。

然后还需要增加一个条件，我们通过用中继器第四列的值控制多选框是否选中，所以如果xuanzhong列的值等于1，这是我们设置多选框为选中状态，否则就默认为非选中状态。

在每项加载时，我们增加情形2，对应条件为item.xuanzhong==1，如果符合该条件，执行交互，设置多选框的为选中状态。如果item.xuanzhong不等于1，理论上我们要设置多选框为非选中状态，但是因为多选框默认为非选中状态，所以我们不需要多此一举，后半段的交互就可以不用写了。

在多选框的上面我们需要增加一个热区挡住多选框，因为多选框是否选中是由中继器xuanzhong列的值决定的。所以多选框上的热区时，能防止鼠标直接点击改变多选框的是否选中。

在鼠标单击多选框上面的热区时，我们需要分两种情况。

1）情况1

当xuanzhong列的值等于1，即原本是已选中的状态，从已选中到未选中，我们执行更新行的交互，更新当前行xuanzhong列的值为0，这要就可以取消选中。

除此之外，因为本来是已选中的状态，所以在中继器2（已选名单的中继器）里面本来是有这个名单的，我们需要在中继器2里删除这位取消选中的员工，所以执行删除行的交互，删除的条件为Item.Column2的值等于 TargetItem.Column0的值，Item.Column2就是对应员工名单中继器里的员工名字；TargetItem.Column0就是对应已选员工中继器里的员工名字。

2）情况2

当上面的情绪不成立（xuanzhong列的值不等于1），即原本是未选中的状态，从未选中到选中，我们首先要执行更新行的交互，更新当前行xuanzhong列的值为1，这样就可以选中当前行的多选框。

然后，我们还要将该员工的名称添加到已选名称中，所以我们需要用添加行的交互，添加的值为Item.Column2（员工名称）。

3. 中继器2（已选名单的中继器）的交互

当中继器2每项加载时，我们要设置中继器2里面的矩形的文本==Item.Column0，这个交互是默认的，如果没有删除过一般不需要我们写。

需要我们写的是当鼠标单击取消X按钮时的交互，如果我们想删去这个员工的名单，要做两个交互，一个是删除当前中继器的当前行，例一个是取消中继器1（员工名单中继器）对应员工的选中。

我们要先做取消中继器1（员工名单中继器）对应员工的选中，因为如果先删除当前行的话，删除之后找不到对应的值去更新了，所以我们要先更新中继器1，我们执行更新行的交互，更新的条件是Item.Column0==TargetItem.Column2，将xuanzhong列的值更新为0即可。

这样我们就完成制作树形穿梭框了，如果树的内容比较多，或者中继器内容比较多，还可以将他们转成动态面板增加滑动条。也可以自己美化样式，例如鼠标悬停时的样式等等。

制作完成后，下次使用的话只需要修改树节点和中继器1里面的内容，即可自动生成交互效果，复用性极强。

那以上就是本期的全部内容了，感谢您的阅读，我们下期见，88~~~

本文由 @做产品但不是经理 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。