Axure原型设计基础项目九中继器——数据的筛选、排序、查询学习目标 1.掌握数据筛选的方法。2.掌握数据排序的方法。3.掌握数据查询的方法
。9.1 数据的筛选 筛选功能从表现形式的角度可看作查询,例如按商品名称查询,或者按价格区间查询。筛选的关键在于条件表达式的编写。
9.1.1 数据筛选以常用的按关键字查询为例,需要设置一个文本框(命名为“searchkey”)来接收用户的输入,再设置一个“查询
”按钮,单击该按钮时能够查询出相关的结果。为此,双击“查询”按钮的“鼠标单击时”事件,打开用例编辑窗口,进行筛选动作的设置。步骤1
选择动作“添加筛选”,如图9-1所示。图9-1 添加筛选步骤2 勾选中继器“shangpin”,如图9-2所示。图9-2 选择中
继器步骤3 设置一个筛选的名称(可以随意设置),如图9-3所示。图9-3 设置名称步骤4 单击条件输入框后面的“fx”,打开“编辑
值”窗口,如图9-4所示。图9-4 编辑值步骤5 设置局部变量“key”以接收用户在文本框“searchkey”中输入的查询关键字
,如图9-5所示。图9-5 局部变量步骤6 添加条件表达式[[Item.miaoshu.indexof(key)>-1]],如图9
-6所示。图9-6 添加表达式 这个条件表达式的作用是将所有名称中包含查询关键字的项筛选出来。通过字符串函数indexof查询商
品名称“miaoshu”中关键字“key”的位置。因为函数indexof的返回值是参数在文本对象中首次出现的位置,所以,如果查询到
包含关键字的项,返回值肯定大于等于0,否则就是-1。例如,当我们输入“巧克力”时,如果商品名称中包含“巧克力”这个关键字,“Ite
m.miaoshu.indexof(key)”就会获取一个大于-1的值,这时候条件成立,所有符合条件的项就会被筛选出来。9.1.2
取消筛选在动作列表中选择“移除筛选”,然后取消勾选筛选的中继器,在窗口右下角输入筛选的名称即可取消筛选,如图9-7所示;勾选“移
除全部筛选”则能够取消所有筛选,如图9-8所示。图9-7 取消单个筛选图9-8 取消全部筛选筛选和排序一样,也支持多个筛选条件同时
存在,每增加一个筛选条件就是在之前的筛选结果上再次进行筛选。例如,先筛选出名称符合条件的商品,再筛选出价格符合条件的商品,最终的筛
选结果就是名称和价格均符合筛选条件的商品。如果两个筛选条件之间没有任何关联,则需要在添加新的筛选前,取消之前的筛选。9.2 按价格
区间进行查询 要设置价格区间需要有两个界定值,这两个值需要用户输入。当单击“查询”按钮时,查询出价格在输入的最小价格与最大价格之间
的商品。这里放入两个文本框并分别命名为“minprice”和“maxprice”,用于接收用户输入的最小价格和最大价格,然后放入一
个“查询”按钮,为其添加“鼠标单击时”事件的用例动作。具体步骤与数据筛选案例类似,唯一不同的是条件表达式,如图9-9所示。图9-9
数据查询设置条件表达式[[Item.jiage>min&&Item.jiage 最大价格的商品筛选出来。“Item.jiage>min”表示商品价格大于最小价格,其中“min”为局部变量,能够获取文本框“min
price”中输入的最小价格,如图9-10所示。图9-10 最小价格“Item.jiage “max”为局部变量,能够获取文本框“maxprice”中输入的最大价格,如图9-11所示。 “&&”为逻辑运算符,表示必须同时符
合以上两个条件,这个表达式才成立。图9-11 最大价格9.3 数据的排序 项目列表默认是将所有的项按照数据集中行的顺序进行展示。不
过,也能通过相应的动作控制项目列表的展示形式。例如:按照不同的列进行升降序排列,按照不同的条件显示筛选结果,等等。这里我们预先准备
一个商品列表,包含图片、商品名称、价格和销量,然后以这个列表为例进行排序设置,如图9-12所示。图9-12 商品列表9.3.1 按
销量排序单击“销量”按钮时,将商品按销量进行降序排列,实现步骤如下:步骤1 双击“销量”按钮的“鼠标单击时”事件,打开用例编辑窗口
。步骤2 设置动作“添加排序”,如图9-13所示。图9-13 添加排序步骤3 勾选中继器“shangpin”,如图9-14所示。图
9-14 选择中继器步骤4 添加这个排序规则的名称(随意设置即可),如图9-15所示。图9-15 添加名称步骤5 选择排序所依据的
列,如图9-16所示。图9-16 选择列步骤6 选择列值的类型,这里是根据销量排序,类型为“Number”,如图9-17所示。图9
-17 选择类型步骤7 选择排序的方式为“降序”,如图9-18所示。图9-18 选择排序方式9.3.2 按价格排序单击“价格”按钮
时,将商品按价格升序的方式排列,即价格最低的商品排序靠前;再次单击“价格”按钮时,将排序的方式切换为降序。步骤1 双击“价格”按钮
的“鼠标单击时”事件,打开用例编辑窗口。步骤2 设置动作“添加排序”,如图9-19所示。图9-19 添加排序步骤3 勾选中继器“J
iage”,如图9-20所示。图9-20 选择中继器步骤4 添加这个排序规则的名称(随意设置即可),如图9-21所示。图9-21
设置名称步骤5 选择排序所依据的列,如图9-22所示。图9-22 选择列步骤6 选择列值的类型,这里是根据销量排序,类型为“Num
ber”,如图9-23所示。图9-23 选择类型步骤7 选择排序的方式为“切换”;默认顺序为“升序”,如图9-24所示。图9-24
选择顺序 与前一个案例“按销量排序”比较,这个案例只是在第7步略有不同。可见,排序的设置比较简单,只要选择好各个选项即可。9.
3.3 排序类型排序的类型一共有5种,如图9-25所示。类型1 Number:数值类型。类型2 Text:文本类型(不支持中文)。
类型3 Text(Case Sensitive):区分大小写的文本类型(不支持中文)。类型4 Date-YYYY-MM-DD:日期
类型,格式为2020-07-28。类型5 Date-MM/DD/YYYY:日期类型,格式为06/21/2020。图9-25 排序类
型如果需要取消排序,在动作列表中选择“移除排序”,如图9-26,然后勾选要取消排序的中继器,在窗口右下角输入排序的名称即可;勾选“
移除全部排序”则能够取消所有排序,如图9-27所示。图9-26 移除单个排序图9-27 移除多个排序不同类型的排序可以同时存在,例
如:按销量降序排序,销量相同时按价格升序排序。这就需要先做价格排序,然后在排序后的项目列表上做销量排序。也就是说主要排序要添加在后
面。项目小结 在中继器中,设置排序条件(如关键字条件,筛选条件)的根本原则是需要对用户寻找目标信息有帮助。筛选条件是根据用户输入的关键字提炼出此类关键字对应的某一类商品,以便于用户通过这一类商品所涉及的参数字段来选择目标商品。相对于排序而言,筛选是将满足筛选条件的商品展示出来,筛选和排序是可以同时存在的。感谢观看 THANKS! |
|
