表格|多选和批量操作( 二 )

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

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

文章插图
4. 中继器表格内开关按钮鼠标单击时交互当开关按钮显示的是禁用状态时，点击“关”按钮时，我们用更新行事件，更新该行jinyong列的值为启用，这样中继器自动加载的时候，因为该行的值为禁用，所以开关的状态就会自动由关变成开。
同样的，当开关按钮显示的是启用状态时，点击“开”按钮时，我们用更新行事件，更新该行jinyong列的值为禁用，这样在中继器自动加载的时候，开关的状态也自动会变成关。
5. 表头全选按钮鼠标单击时交互如果点击的是未选中的全选按钮，相当于需要全选下面的内容，所以我们也是用更新行的事件，更新的条件是中继器内可见的行，然后将xuanzhong列的值更新为1，这样中继器自动重新加载时就可以全选可以看到的行。这里用可视的行的原因和前面一样，因为后续还可能添加搜索、筛选、分页的情况，如果不是选可视行，那个时候就会出现问题。
完成之后还要设置该动态面板到选中的状态。

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

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

文章插图
如果记录文本的值不等于等，代表有内容已被选中，根据不同的按钮，设置不同的交互内容。
2）批量启用
鼠标单击批量启用按钮时，如果有内容被选中，我们用更新行事件，将选中行qiyong列的值更新为启用，因为xunzhong列是控制行是否被选中的，所以更新条件为xuanzhong列的值==1
3）批量禁用
批量禁用和批量启用其实基本一样，就是更新行的时候，将qiyong列的值变成禁用而且，更新的条件同样是xuanzhong列的值==1
4）批量删除
鼠标单击批量启用按钮时，如果有内容被选中，我们用删除行事件，删除条件为xuanzhong列的值==1
5）批量导出
因为axure是没有办法根据表格内容导出文件的，所以没有办法实现动态的交互，如果真的有演示的需要，我们可以写死，即事前将对应的excel表格上传到服务器，当鼠标单击批量导出按钮时，用打开链接的交互，url地址填写文件的网络地址，这样就可以实现导出下载的模拟效果。
这样，我们就完成了能多选、能批量操作的原型模板了，以后使用的话，我们可以直接在excel表格中填写好数据，再复制到中继器表格即可，是不是很方便快捷呢？
那以上就是本期的全部内容了，感谢您的阅读，我们下期见，88~~~
本文由 @做产品但不是经理原创发布于人人都是产品经理，未经作者许可，禁止转载
【 表格|多选和批量操作】题图来自Unsplash，基于CC0协议