axure商城

【Axure 教程】中继器高级用法-列表复选

【Axure 教程】中继器高级用法-列表复选

【Axure 教程】中继器高级用法-列表复选

【Axure 教程】中继器高级用法-列表复选

原型展示:https://vqrnj1.axshare.com

所需元件:

  • 中继器:表单制作;
  • 文本框:表头制作;
  • 复选框:复选交互制作;

思路:基于中继器中的复选状态进行赋值,并基于整体列表的状态值进行换算,得出全选的临界值公式;

教程

一、中继器的复选赋值

【Axure 教程】中继器高级用法-列表复选

因列表载入时,默认均为未选中状态,且初期设定为“未选中”时,状态值为“-1”,“已选中”时,状态值为“1”,因此状态值在载入时,赋值为“-1”

【Axure 教程】中继器高级用法-列表复选

如上图,设置复选框未选中时,在进行点击时,设置复选框为“已选”状态,同时给予状态值赋予 [[State*(-1)]];即在“未选中”状态时,将状态切换到“已选中”状态时,将状态值设置为“1”

【Axure 教程】中继器高级用法-列表复选

同理,在选中时,给予状态值赋予 [[State*(-1)]];即在“已选中”状态时,将状态切换到“未选中”状态时,将状态值设置为“-1”

二、汇总中继器中的状态值

【Axure 教程】中继器高级用法-列表复选

【Axure 教程】中继器高级用法-列表复选

当状态值发生变化时,更新状态值的总值,公式如下:[[Count.slice(0)-Exstate State]]

【Axure 教程】中继器高级用法-列表复选

前状态值在状态值发生变化时,通过赋值获取,如上图所示

三、设置全选操作时的状态及赋值

【Axure 教程】中继器高级用法-列表复选

【Axure 教程】中继器高级用法-列表复选

【Axure 教程】中继器高级用法-列表复选

需要注意的是,当全选设置在“中间”状态切换到“全选”状态时,需要将中继器中的状态值,统一设置为“1”

四、计算中继器中复选框对全选框的影响临界值

在【第三步】当中,我们已经可以获取到状态值在每次变化时的总数,因此通过这个总数去判断中继器中何时会影响到全选框的状态;判断条件如下:

【Axure 教程】中继器高级用法-列表复选

【Axure 教程】中继器高级用法-列表复选

当中继器中的复选框从“未选”设置为“已选”状态时,若满足条件 [[Item.Repeater.itemCount-2]],则需要将全选框同步设置为“选中”状态,否则,仅需将全选框设置为“中间”状态;

【Axure 教程】中继器高级用法-列表复选

【Axure 教程】中继器高级用法-列表复选

当中继器中的复选框从“已选”设置为“未选”状态时,若满足条件 [[Item.Repeater.itemCount*(-1) 2]],则需要将全选框同步设置为“未选”状态,否则,仅需将全选框设置为“中间”状态;


更多内容,微信搜索“爱学儿”,一起交流探讨吧!

给TA打赏
共{{data.count}}人
人已打赏
高级教程

【Axure 教程】中继器高级用法-下拉多选

2021-5-12 21:44:34

基础教程高级教程

【Axure 教程】中继器中级教程-联级框

2021-6-3 9:45:19

axure商城
5 条回复 A文章作者 M管理员
  1. carloscheng

    请问 ,全选框中的 中间状态 是怎么设置的? 我用的是 Axure rp9 发现 复选框中没有中间状态的设置。

  2. ʚ👿ɞ

    状态值”“前状态值”这两项要怎么和第一列的复选框绑定…

  3. ʚ👿ɞ

    您好,复选框没看懂与状态值怎么绑定的

  4. TinrayYAO

    有点看不太懂 啊,中继器里有“状态值”“前状态值”这两项要怎么隐藏呢?

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索