最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

中继器的应用(7)

教程 小楼一夜听春语 17385浏览

在《中继器的应用(6)》中,我们一起完成了一个薪酬列表的排序交互。

这篇教程中,我们仍然基于薪酬列表,添加筛选的交互。

第一个筛选交互是根据姓名进行筛选。

第二个是根据薪酬的区间进行筛选。

我们先在画布中添加一些元件,并进行相应的命名。

然后,开始添加筛选的交互。

一、根据姓名筛选

为姓名查询的按钮添加[单击时]的交互事件,选择[添加筛选]的动作,为[薪酬列表]添加筛选。

筛选名称可以自定义为“姓名筛选”。

筛选的规则如何填写?

筛选的规则,就是每一个列表项项满足什么条件时,才把它加载出来。

很明显,我们要写的条件是列表项中员工的姓名要和输入的姓名相同。

列表项的姓名我们可以通过变量“item.StuName”获取。

输入的姓名,我们可以使用局部变量获取,例如局部变量命名为“n”。

这个规则的条件表达式我们就可以写成“[[Item.StuName == n]]”。

尴尬提示:StuName不是学生姓名吗?怎么还有薪酬了?之前本来准备用成绩表来做案例的,后来忘记改列名了...不过...这些是实习生不可以吗?嘿嘿!

但是,如果采用这个规则,就必须输入完整的姓名才能查询到结果,而不能模糊查询。

我们思考一下模糊查询的定义,应该是员工的姓名包含输入的姓名关键字。

包含关系可以通过字符串函数“indexOf()”来表示,这是一个查询函数,能够从字符串对象中查询参数字符串出现的位置。能查询到参数字符串时,会得到0以上(包含0)的一个位置数值,否则,得到的数值是“-1”。

所以,查询结果不等于“-1”,或者大于等于“0”,或者大于“-1”,都可以视为条件成立。

这三种条件表达式的写法分别为:“[[Item.StuName.indexOf(key)!=-1]]”、“[[Item.StuName.indexOf(key)>=0]]”和“[[Item.StuName.indexOf(key)>-1]]”。

使用哪一个都能够正确的实现模糊查询。

二、根据薪酬区间筛选

为薪酬区间查询的按钮添加[单击时]的交互事件,选择[添加筛选]的动作,为[薪酬列表]添加筛选。

筛选名称可以自定义为“薪酬区间筛选”。

筛选的规则如何填写?

先把它描述出来。

我们要写的条件是列表项中员工的薪酬要大于等于输入的最低薪酬并且小于等于输入的最高薪酬。

列表项的薪酬我们可以通过变量“item.Pay”获取。

输入的最低薪酬和最高薪酬使用局部变量获取,例如局部变量命名为“min”和“max”。

并且的关系使用运算符“&&”表示。

完整的条件表达式是“[[Item.Pay>=min&&Item.Pay<=max]]”。

到这里,关于这个列表筛选交互的案例就全部完成了。

你学废了吗?

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 中继器的应用(7)