表格|多选和批量操作

编辑导语：在系统操作中，批量操作是常用的操作方式，本篇作者就教大家如何在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就代表选中了几行，所以记录文本的值为几，就代表有几行被选中。