Axure入门与基础之中继器筛选和新增
沉沙 2019-01-02 来源 : 阅读 665 评论 0

摘要:本篇教程探讨了Axure入门与基础之中继器筛选和新增 ,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇教程探讨了Axure入门与基础之中继器筛选和新增 ,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

Axure入门与基础之中继器筛选和新增

<


本次教程是对Axure中继器的深化学习,之前发布过通过中继器实现模块排序的功能,本次教程是利用中继器实现筛选和新增。
    效果图
根据所选项筛选出符合条件的角色,例如选择性别女,筛选出性别为女的角色。
添加一个新的角色,输入角色的字段信息,将角色添加进中继器的数据集内。
往期回顾:
根据所选字段筛选出符合条件的结果:
新增角色:
    实现逻辑
首先,介绍一下中继器,简单说,中继器是一个数据集,里面可以导入数据和图像,新增行、删除行、进行排序和筛选数据,中继器通常更多的出现在高级交互中。《Axure教程—中继器实现模块排序》(文章在历史教程中可见)一文中,讲述了中继器的排序功能,可以根据我们选择的字段对模块进行排序。本期讲的是利用中继器实现筛选功能和增加新数据的功能。筛选功能和排序功能类似,都是设置数据集,实现筛选或者排序。
新增功能相对来说复杂一丢丢,但本质上其实就是将所输入的数据赋值到中继器中即可。
好,那么接下来从教程中学习到底如何实现上述功能。
    原型回顾
本次教程是在之前中继器教程的基础上做了优化,因此,我们先来回顾一下原型,回忆一波中继器内字段名称。下图是中继器内数据的字段名称:
Axure RP 9 教程—中继器实现筛选和新增
OK!接下来开始讲筛选和新增!
    操作步骤—筛选
我们以选择性别为例讲述操作步骤。Step one.创建一个Droplist,命名为“Droplist 性别”,为Droplist添加四个选项,分别为 性别、女、男、未知。“性别”代表初始默认状态,“未知”代表奇奇怪怪的角色性别,男和女就不多做解释。
Step two.
为Droplist 性别 设置交互,选项改变时,如果选中项为男,为中继器新增过滤器,规则为[[item.Sex=='女']],这样,在选中性别为女时,中继器就会自动筛选出性别为女的角色。需要注意的是,item.Sex代表的是中继器中数据集列名,'女'代表的是变量。这样,就实现了选中性别为女时筛选出对应的角色。
Step three.
接下来,继续设置if选中项为男,新增过滤器,if选中项为未知,新增过滤器...
Step four.
最后,if选中项为性别,移除中继器的过滤器。
ok,附上交互设置截图:
Axure RP 9 教程—中继器实现筛选和新增
Step five.接下来以同样的方式设置其他的中继器数据集列的筛选即可。
    操作步骤—新增
Step one.我们先明确添加角色时需要的字段,包括:名称、性别、位置、评分、攻击距离、攻击力、防御力;明确他们的输入类型,名称项为文本,性别和位置为可选项,评分、攻击距离、攻击力和防御力输入类型为Number。Step two.
制作一个新增角色选框,在里面添加所需要输入的字段输入框或下拉列表,取好名称,将他们打组方便管理(这里我命名方式为“添加XX”,XX为输入字段的名称,如输入姓名的文本框命名为“添加名称”)。增加btn添加和btn取消用于控制是否添加角色,ok,准备工作就绪,接下来就是设置如何新增了。
Step three.
为添加按钮增加交互,鼠标单击时,为中继器新增行,点击新增行,在弹出的数据集中设置函数,本案例中,名称列,即Name列设置为A,同时为A设置局部变量为“元件文字=添加名称”;同样,Sex列,即性别列,设置为B,B的局部变量为“元件文字=添加性别”;这样,将所需的7个字段一一对应设置,这样,就实现了新增一行数据的功能。交互如下图:
Axure RP 9 教程—中继器实现筛选和新增
Axure RP 9 教程—中继器实现筛选和新增
Axure RP 9 教程—中继器实现筛选和新增
Step four.添加一些用于完善的交互,在点击添加之后,隐藏新增模块,同时让所有输入框和下拉列表框都设置为默认值,这样,我们就可以重复多次添加角色了。
   

本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计