axure7.0教程_小楼作品(十八)中继器实现全选、反选和选中计数

AxureRP7.0教程 小楼一夜听春语 37122℃ 0评论

最后一节,大家仔细看好了,精彩好片即将开始!

哼哼哈兮,打开你的中继器;

吼吼哈嘿,我要把一个框框塞进去;

啊啊……..

不是这样的,楼老师是个正经人!

本篇教程示例原型下载:Axure7.0原型_小楼作品_中继器全选、反选和选中计数.rp

第一式:准备元件

1、  拖出来一个中继器到编辑区;

2、  在外面放上一个复选框用于触发全选、一个按钮用来触发反选、还有一个文本Lable用来显示选中项的数量;

3、  双击打开中继器,删除中继器主页中的矩形,然后拖一个复选框和一个文本Labae进去。

4、创建一个计数用的变量,在示例中楼老师偷懒,用的系统自带的变量。

第二式:整理思路

全选:当复选框被选中时让中继器里面的复选框也被选中;当复选框取消选中的时候中继器里面的复选框也被取消;

反选:当点击反选的时候,中继器里面的复选框切换被选中的状态;

计数:当中继器里面的复选框被选中时,设置变量值递增1,如果选中被取消则变量值递减1,然后让文本显示出来。

第三步:实现过程

1、  设置触发全选的那个复选框的onclick事件,这里要添加两个用例:

18-1

A:if被选中的值为真,设置选中中继器中的复选框;

B:else if true ,设置未选中中继器中的复选框。

2、  设置触发反选的那个复选框的onclick事件为:设置被选中的中继器复选框为切换(toggle);

18-2

3、  设置中继器中的复选框的“选中状态改变时”事件,这里添加3个用例:

18-3

A:if被选中的值为真,设置变量=值[[变量+1]];

B:else if true ,设置变量=值[[变量-1]];

C:if true,设置文本值为:选中了[[变量]]项。

4、在中继器中添加一些测试数据,并且和中继器里面的复选框的文字做绑定。不会这一步的请先学习Axure7.0教程(一)。

18-4

18-5

好了,下面就是最后的精彩时刻,你准备好了吗?啊!~~~~~~~~~~~~~~~~~~~~~~~~~~~

(此处省略两个单词“The End”)

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » axure7.0教程_小楼作品(十八)中继器实现全选、反选和选中计数

喜欢 (13)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(18)个小伙伴在吐槽
  1. 头像
    小楼老大,您好!请教一下中继器中,如果有一个字段是图片型,该怎么实现在外部赋值给这个字段呢。
    cjk2013-10-11 17:32 回复
    • 小楼一夜听春语
      你确定会给中继器赋值了吗?
      小楼一夜听春语2013-10-11 18:03 回复
  2. 头像
    您好,按照您的例子我已经会给文字类型的字段赋值了。就是图片一直不行。
    cjk2013-10-18 14:15 回复
    • 小楼一夜听春语
      图片在中继器数据集中右键添加
      小楼一夜听春语2013-10-29 18:00 回复
  3. 头像
    吐槽一句吧,全选后,只要有一个复选框是false,那么全选复选框就是false了
    一个,你懂的2013-11-20 17:40 回复
    • 小楼一夜听春语
      是有这个问题,添加一个变量记录一下是中继器中的复选框触发的取消全选还是主动取消全选,在全选的复选框选中状态改变时进行判断。
      小楼一夜听春语2013-11-20 17:56 回复
  4. 头像
    我遇到一个问题,不知道是不是Axure 7的问题: 在中继器中的复选框,添加条件:if 被选中的值 为真,总是判断不了,直接进入else if true(非中继器的复选框就没问题),而且对中继器内的元件操作都无效,好奇怪啊!求小楼~
    newbied2014-01-15 11:04 回复
    • 小楼一夜听春语
      有可能,正式版的中继器在一些判断上是有bug
      小楼一夜听春语2014-01-15 11:09 回复
      • 头像
        谢谢哈,原来如此。我直接下载你的rp文件,无论怎么点复选框也都是 -1。勾选和取消勾选都是 -1,那除了正式版还有其他版本可以下载吗?
        newbied2014-01-15 11:27 回复
  5. 头像
    请问在中继器中怎么实现单选?
    kelly2014-08-05 11:03 回复
  6. 头像
    教程存在问题的。设置变量值后,应该直接把值给到文本。而不是继续编辑条件。
    cc2015-04-17 11:23 回复
    • 小楼一夜听春语
      只是写法不一样 写里面不是要写两句吗?
      小楼一夜听春语2015-04-17 11:47 回复
  7. 头像
    请教:中继器中,怎么通过删除按钮删除选中的行
    guge2016-01-09 16:36 回复
  8. 头像
    我碰到几个问题,想请教一下:1、初始加载过滤后的数据——中继器原有多条记录,刚进入页面怎么实现初始过滤显示的记录,比如页面A设置一个变量值B,传递到页面C,变量B作为页面C的一个查询条件,即在页面C载入时就是通过变量B过滤后的结果;2、删除记录之后的序号变更——假设中继器有5条记录,序号为1~5,删除了序号为3的记录,怎么实现序号【4、5】依次前移一个数字;3、如何获取中继器首条记录用于显示;4、中继器设置当前页,指定下一页,效果出来显示下一页信息,怎么获取指定下一页的信息;问题3、4和问题1本质应该是一样的,解决了问题1,问题3、4我觉得也就不是问题。
    胖猫猫2016-04-14 03:42 回复
    • 小楼一夜听春语
      1、页面载入时,添加筛选; 2、每项加载时,设置序号元件文本=[[item.index]]
      小楼一夜听春语2016-04-14 09:29 回复
  9. 头像
    原型在8.0上计算选中数量会变成每次加2
    哈哈2016-05-20 14:23 回复
    • 头像
      我的也是,全选和反选是加减1,单独点里面复选框就是加减2
      Joe2019-01-04 13:04 回复
  10. 头像
    怎么判断中继器里面的复选框全选的?
    哈哈2016-05-20 14:25 回复