【Axure教程】多选和批量操作

2021年9月27日 809点热度 0人点赞 0条评论

编辑导语：在系统操作中，批量操作是常用的操作方式，本篇作者就教大家如何在Axure中制作一个能多选和批量操作的原型模板，并对该步骤进行了梳理，分享给你，希望对你有所帮助。

在系统操作中，批量操作是常用的操作方式，例如批量启用、批量禁用、批量删除、批量下载……

所以今天作者就教大家如何在Axure中制作一个能多选和批量操作的的原型模板，该原型主要使用中继器制作，所以复用性很高，再次使用时只需填写中继器表格内容，自动实现交互效果。完成后如下如所示效果：

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

一、材料准备

1. 按钮组

准备4个不同颜色的按钮，分别是批量启用、批量禁用、批量删除和批量导出。

2. 提示弹窗

提示弹窗的用途是当用户没有选中表格内容并且点击了批量操作的按钮，这样时会弹出提示用户要先选择批量操作的内容。弹窗用提示图标和矩形制作，具体样式可以参考下图。

3. 表头

表头由多选框、矩形背景和文本标签组成。

多选框（全选按钮）——包含未选状态和已选状态，放在同一个动态面板的两个状态内。

文本标签——填写每列列名，自行调整尺寸和位置即可。

4. 表格内容

表格内容主要由中继器制作而成，中继器表格内部元件包括:

多选框——包含未选状态和已选状态，放在同一个动态面板的两个状态内;
文本标签——对应中继器表里每列的内容，自行调整尺寸和位置即可。
开关按钮——包括开状态（启用）的按钮和关状态（禁用）的按钮。
按钮——维护和删除按钮，这里用文本标签制作即可。
背景框——默认透明，添加选中样式为浅蓝色。

将上述所有元件组合在一起，方便后续添加交互，如下图所示。

中继器表格如下图所示：

Column1——中继器内第一个文本标签显示的值。
Column2——中继器内第二个文本标签显示的值。
Column3——中继器内第三个文本标签显示的值。
Column4——中继器内第四个文本标签显示的值。
qiyong——开关按钮的状态，如果值等于启用，则显示开状态的按钮；否则就显示关状态的按钮。
xuanzhong——通过改列的值控制是否被选中，如果值等于1，则该行被选中，否则则未被选中。

5. 记录文本

新建一个文本标签，默认隐藏，该文本用于记录选中的行数。

二、交互制作

1. 中继器每项加载时交互

1）选中记录归零

在中继器开始加载第一条的时候（item.index==0），我们首先要设置记录文本为0，这样就可以保证中继器每次加载开始时，记录的选中数都为0。

2）设置中继器内文本标签显示的内容

接下来中继器开始加载，我们要把中继器表格内的内容设置到中继器里面对应的文本标签，例如设置文本标签1的值=表格第一列的值（item.column1），文本标签2的值=表格第2列的值（item.column2）；文本标签3的值=表格第3列的值（item.column3），文本标签4的值=表格第4列的值（item.column4）……

3）设置选中时的交互

如果表格所在行xuanzhong列为1，即该行被选中，这时我们首先要将中继器表格内动态面板设置为选中的状态。然后设置记录文本他原来的值+1，这样每当有一行选中时，记录文本的值都会在原来基础+1，有几个+1就代表选中了几行，所以记录文本的值为几，就代表有几行被选中。

4）启用和禁用

如果jinyong列的值为启用，那我们就显示开关的开状态，并且隐藏关状态；否则我们就隐藏开状态，显示关状态，因为我们的开关按钮默认是关的状态，所以后面否则的交互也可以不用写，因为只要对应表格里的文字不是启用，就自动显示关状态。

5）触发交互

在中继器加载完成后（Item.isLast==true），我们还要触发记录文本单击时的交互，来判断是否需要选中表头的全选按钮。

2. 记录文本鼠标单击时交互

这里我们需要分两种情况，第一种是记录文本的值等于中继器可以看见的行数，即（this.text==LVAR1.visibleItemCount）,如果这种情况成立，那么就设置表头里面的动态面板的状态为选中状态；否则则为未选中的状态。这里解释一下为什么要用中继器可见行数，因为后续还可能添加搜索、筛选、分页的情况，如果不是选可视行数，那个时候就会出现问题。

3. 中继器表格内多选按钮鼠标单击时交互

如果点击的是未选中的多选框，这里我们直接用更新行事件，更新当前行的xuanzhong列值为1，因为上面的交互，当它的值变为1时，就会重新加载，在中继器每项加载时，xuanzhog的值等于1，就会把该行选中，这里是灵活的运用了中继器里的值控制是否选中。

如果点击的是已选中的多选框，这里我们同样用更新行事件，更新当前行的xuanzhong列的值为0，这样在中继器自动加载时就会变回未选中的状态。

4. 中继器表格内开关按钮鼠标单击时交互

当开关按钮显示的是禁用状态时，点击“关”按钮时，我们用更新行事件，更新该行jinyong列的值为启用，这样中继器自动加载的时候，因为该行的值为禁用，所以开关的状态就会自动由关变成开。

同样的，当开关按钮显示的是启用状态时，点击“开”按钮时，我们用更新行事件，更新该行jinyong列的值为禁用，这样在中继器自动加载的时候，开关的状态也自动会变成关。

5. 表头全选按钮鼠标单击时交互

如果点击的是未选中的全选按钮，相当于需要全选下面的内容，所以我们也是用更新行的事件，更新的条件是中继器内可见的行，然后将xuanzhong列的值更新为1，这样中继器自动重新加载时就可以全选可以看到的行。这里用可视的行的原因和前面一样，因为后续还可能添加搜索、筛选、分页的情况，如果不是选可视行，那个时候就会出现问题。

完成之后还要设置该动态面板到选中的状态。