聊聊【Axure教程】多选和批量操作的表格模板

liukai · 发表于 2024-2-28 09:28:19

　　在系统操作中，批量操作是常用的操作方式，例如批量启用、批量禁用、批量删除、批量下载……axure原型素材https://www.axure9.comAxure模板网为产品经理提供各种软件开发Axure RP产品原型模板下载，Axure组件及素材免费下载,为产品经理提高设计效率，保持产品一致性。

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

　　【原型效果】

　　【原型预览】

　　用电脑点击左下方阅读原文或复制打开下面的原型预览地址

　　https://axhub.im/ax9/2bcd864c6573fb02/#g=1&id=d5j9n1&p=%E6%89%B9%E9%87%8F%E6%93%8D%E4%BD%9C%E8%A1%A8%E6%A0%BC%E6%A1%88%E4%BE%8B

　　【原型下载】

　　方式2：https://weidian.com/item.html?itemID=3681949369

　　【制作教程】

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

　　提示弹窗的用途是当用户没有选中表格内容并且点击了批量操作的按钮，这样时会弹出提示用户要先选择批量操作的内容。

　　弹窗用提示图标和矩形制作，具体样式可以参考下图

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

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

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

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

　　多选框——包含未选状态和已选状态，放在同一个动态面板的两个状态内;

　　文本标签——对应中继器表里每列的内容，自行调整尺寸和位置即可。

　　开关按钮——包括开状态（启用）的按钮和关状态（禁用）的按钮

　　按钮——维护和删除按钮，这里用文本标签制作即可

　　背景框——默认透明，添加选中样式为浅蓝色

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

　　中继器表格如下图所示：

　　Column1——中继器内第一个文本标签显示的值

　　Column2——中继器内第二个文本标签显示的值

　　Column3——中继器内第三个文本标签显示的值

　　Column4——中继器内第四个文本标签显示的值

　　qiyong——开关按钮的状态，如果值等于启用，则显示开状态的按钮；否则就显示关状态的按钮

　　xuanzhong——通过改列的值控制是否被选中，如果值等于1，则该行被选中，否则则未被选中

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

　　1.1选中记录归零

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

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

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

　　1.3设置选中时的交互

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

　　1.4启用和禁用

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

　　1.5触发交互

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

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

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

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

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

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

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

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

　　如果点击的是未选中的全选按钮，相当于需要取消下面全部内容的选中，所以我们也是用更新行的事件，更新的条件是中继器内可见的行，然后将xuanzhong列的值更新为0，这样中继器自动重新加载时就可以将可以看到的行全部取消选中。完成之后还要设置该动态面板到未选中的状态

　　6.1判断是否有选中内容

　　点击批量处理按钮时，我们首先要判断是否有内容被选中，如果没有选中，我们先显示提示弹窗，这一部的判断是4个按钮都一样的。那么我们怎样判断是否已经有内容被选中呢？前面我们提到了记录文本的作用，就是可以记录有多少行内容被选中，如果没有内容被选中，记录文本的值==0，这时我们显示提示弹窗即可。

　　如果记录文本的值不等于等，代表有内容已被选中，根据不同的按钮，设置不同的交互内容：

　　6.2批量启用

　　鼠标单击批量启用按钮时，如果有内容被选中，我们用更新行事件，将选中行qiyong列的值更新为启用，因为xunzhong列是控制行是否被选中的，所以更新条件为xuanzhong列的值==1

　　6.3批量禁用

　　批量禁用和批量启用其实基本一样，就是更新行的时候，将qiyong列的值变成禁用而且，更新的条件同样是xuanzhong列的值==1

　　6.4批量删除

　　鼠标单击批量启用按钮时，如果有内容被选中，我们用删除行事件，删除条件为xuanzhong列的值==1

　　6.5批量导出

　　因为axure是没有办法根据表格内容导出文件的，所以没有办法实现动态的交互，如果真的有演示的需要，我们可以写死，即事前将对应的excel表格上传到服务器，当鼠标单击批量导出按钮时，用打开链接的交互，url地址填写文件的网络地址，这样就可以实现导出下载的模拟效果。

　　这样，我们就完成了能多选、能批量操作的原型模板了，以后使用的话，我们可以直接在excel表格中填写好数据，再复制到中继器表格即可，是不是很方便快捷呢？

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

　　作者：梓贤vigo；

　　微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容

　　本文由微信公众号：Axure高保真原型授权发布，未经许可，禁止转载