表格|多选和批量操作

编辑导语：在系统操作中，批量操作是常用的操作方式，本篇作者就教大家如何在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）,如果这种情况成立，那么就设置表头里面的动态面板的状态为选中状态；否则则为未选中的状态。这里解释一下为什么要用中继器可见行数，因为后续还可能添加搜索、筛选、分页的情况，如果不是选可视行数，那个时候就会出现问题。