AxureRP7.0从入门到精通(连载43)

Axure书籍 小楼一夜听春语 24076℃ 0评论

1.1.  筛选

筛选的表现形式基本上是一些查询操作,比如按商品名称查询,或者按照价格区间查询。筛选的关键在于条件表达式的编写。

案例:按关键字进行名称查询

既然是按关键字进行名称的查询,我们需要一个文本框(命名为“searchkey”)来接收用户的输入,同时,需要一个查询按钮,在点击这个按钮时查询出相关的结果。双击“查询”按钮的【鼠标单击时】事件名称,打开用例编辑界面,进行筛选动作的设置。

具体的步骤如下(图6-39):

1、选择动作【添加筛选】;

2、勾选中继器【goodslist】;

3、设置一个筛选的名称,可以随意设置;

4、点击条件输入框后方的【fx】,打开编辑值的界面;

5、设置局部变量“key”接收用户在文本框“searchkey”中输入的查询关键字;

6、添加条件表达式:[[Item.goods_name.indexof(key)>-1]]

图6-39

(图6-39)

   条件表达式解释:

[[Item.goods_name.indexof(key) > -1]]

这个条件表达式的作用为将所有名称中包含查询关键字的项筛选出来。通过字符串函数indexof查询商品名称“Item.goods_name”中关键字“key”的位置。因为,函数indexof的返回值是参数在文本对象中首次出现的位置,所以,如果查询到包含关键字,返回值肯定大于等于0,否则就是-1。

例如:当我们输入“美的”时,如果商品名称中包含“美的”这个关键字,“Item.goods_name.indexof(key)”就会获取到一个大于-1的值,这时候条件成立,所有符合条件的项就被筛选出来了。

 

案例:按价格区间进行查询

价格区间需要有两个界定价格范围的值,这个两个值是用户在文本框中输入的,当点击查询按钮时,查询出价格在输入的最小价格与最大价格之间的商品。我们放入两个文本框命名为“minprice”和“maxprice”用来接收用户输入的最小价格和最大价格。然后放入一个“查询”按钮,为其添加【鼠标单击时】事件的用例动作。具体步骤与上一个案例一致,唯一不同的是条件表达式。(图6-40)

条件表达式解释:

[[Item.goods_price > min && Item.goods_price < max]]

这个表达式的作用是将所有价格大于最小价格并且小于最大价格的商品筛选出来。

“Item.goods_price > min”表示商品价格大于最小价格,其中“min”为局部变量,能够获取文本框“minprice”中输入的最小价格;

“Item.goods_price < max”表示商品价格小于最大价格,其中“max”为局部变量,能够获取文本框“maxprice”中输入的最大价格;

“&&”为逻辑运算符,表示必须同时符合以上两个条件,这个表达式才成立。

通过上述设置,就能够实现价格区间的筛选功能。

备注:案例里的表达式查询的结果不包含与最小价格和最大价格相同的商品,如需包含,表达式应为:[[Item.goods_price >= min && Item.goods_price <= max]]

图6-40

(图6-40)

   最后,如果需要取消筛选,可以在动作列表中选择【移除筛选】,然后勾选取消筛选的中继器,在界面右下角输入筛选的名称即可取消筛选;或者勾选【全部】则能够取消所有筛选。

筛选和排序一样,也能够多个筛选同时存在,每增加一个筛选条件都是在之前的筛选结果上再次进行筛选。比如:先筛选出名称相符的商品,再筛选出价格符合条件的商品。这时候的筛选结果就是名称相符且价格符合条件。如果两个筛选之间没有任何关联,则需要在添加新的筛选前,取消之前的筛选。


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

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP7.0从入门到精通(连载43)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. 什么时候出版呢?
    小松鼠2015-11-11 12:25 回复
  2. 写的很好呀,什么时候再更新,期待~!
    pp2015-12-04 09:40 回复
  3. 还有多少没更新啊?
    女皇设计师2015-12-19 00:10 回复
  4. 楼楼我想问一下~近期在看您写的教程感觉帮助特别大~我想自己做一套UI界面~一般在用AXURE写原型的时候是只要写出流程图还是呀演示的过程动画都需要,在设计好界面后~操作动画展示一般用什么软件做呢?谢谢您啦!
    小小炸弹2015-12-25 14:09 回复
    • 小楼一夜听春语
      交互程度取决于需求,什么程度能帮你完成沟通就做到什么程度。至于动态效果Axure能实现绝大部分。
      小楼一夜听春语2015-12-25 15:12 回复
  5. 期待继续更新~~
    皮蛋蛋2016-01-29 15:40 回复
  6. 怎么发现我的函数都没有老师说的那些
    哈哈2017-10-09 10:20 回复