【转】AxureRP8实战手册-案例19（ 中继器：商品类型筛选）
AxureRP8实战手册-案例19（ 中继器：商品类型筛选）
案例19. 中继器：商品类型筛选
案例来源:
美丽说-宝贝搜索
案例效果：
- 筛选前：（图1-156）
- 筛选后：（图1-157）
案例描述：
选中一个筛选条件后，将满足该条件的商品筛选出来。并且，多个筛选类型可以叠加。
元件准备：
- 页面中：（图1-158）
包含命名：
- 见案例16与案例17。
思路分析：
- 如果需要实现按类型的筛选，就需要在中继器的数据集中存储不同类型的数据；根据案例效果，每一种类型都应该在数据集中有对应的一列类型数据，记录每个商品是否此种类型；在这里我们仅以前两种类型（“11新款狂欢节”与“秋冬新款”）为例，省略其它类似操作。（操作步骤1）
- 在每一种类型的复选框被选中时，都要添加该种类型的筛选；（操作步骤2）
- 同理，在每一种类型的复选框取消选中时，也要相应的取消筛选；（操作步骤3）
- 做好一个复选框的交互后，其它复选框也要相应的进行设置。（操作步骤4）
操作步骤：
1、先在数据集中添加2列数据，列名分别是“Promotion”与“NewStyle”，表示促销与新款的数据列；具有属性的商品列值为“True”，不具有属性的商品列值为“False”；（图1-159）
2、根据案例17，我们知道底层的复选框会被进行选中状态的切换；那么，我们在“11新款狂欢节”底层复选框的【选中时】事件中添加“用例1”，设置动作【添加筛选】到中继器“GoodsList”；配置中不勾选【移除其它筛选】的选项,确保能够多条件筛选；筛选{名称}为“FilterPromotion”；筛选{条件}为“[[Item. Promotion==’True’]]”；
- 用例动作设置：（图1-160）
3、继续上一步，在该元件底层复选框的【取消选中时】事件中添加“用例1”，设置动作为【移除筛选】中继器“GoodsList”，{被移除的筛选名称}中填写上一步的筛选名称“FilterPromotion”；
- 用例动作设置：（图1-161）
4、参考操作步骤2~3，为“秋冬新款”的底层复选框添加交互，不同的是筛选名称为“FilterNewStyle”，筛选条件为“[[Item. NewStyle==’True’]]”。
- 事件交互设置：（图1-162）
补充说明：
- 这个案例中，商品 “双11活动”的优先级最高，当同时具备“双11活动”与“秋冬新款”属性时，优先显示“双11活动”的图标，所以筛选后的效果图中不完全是“秋冬新款”的图标。
- 注意本案例条件表达式中“True”要用英文半角的单引号括起来（数字无需这样处理）；
- 本案例中与网站实际内容略有不同；网站中第5列商品为推广商品，与商品列表并非统一列表；本案例中，为了排列美观，将商品列表调整为5列。
特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
