案例19. RP中继器器：商品类型筛选

• 筛選前：（图1-156）

• 筛选后：（图1-157）

选中一个筛选条件后将满足该条件的商品筛选出来。并且多个筛选类型可以叠加。

• 页面中：（图1-158）

• 见案唎16与案例17

• 如果需要实现按类型的筛选，就需要在RP中继器器的数据集中存储不同类型的数据；根据案例效果每一种类型都应该在数据集Φ有对应的一列类型数据，记录每个商品是否此种类型；在这里我们仅以前两种类型（“11新款狂欢节”与“秋冬新款”）为例省略其它類似操作。（操作步骤1）
• 在每一种类型的复选框被选中时都要添加该种类型的筛选；（操作步骤2）
• 同理，在每一种类型的复选框取消选Φ时也要相应的取消筛选；（操作步骤3）
• 做好一个复选框的交互后，其它复选框也要相应的进行设置（操作步骤4）

1、先在数据集中添加2列数据，列名分别是“Promotion”与“NewStyle”表示促销与新款的数据列；具有属性的商品列值为“True”，不具有属性的商品列值为“False”；（图1-159）

2、根據案例17我们知道底层的复选框会被进行选中状态的切换；那么，我们在“11新款狂欢节”底层复选框的【选中时】事件中添加“用例1”設置动作【添加筛选】到RP中继器器“GoodsList”；配置中不勾选【移除其它筛选】的选项,确保能够多条件筛选；筛选{名称}为“FilterPromotion”；筛选{条件}为“[[Item. Promotion==’True’]]”；

• 用例动作设置：（图1-160）

3、继续上一步，在该元件底层复选框的【取消选中时】事件中添加“用例1”设置动作为【移除筛选】RP中继器器“GoodsList”，{被移除的筛选名称}中填写上一步的筛选名称“FilterPromotion”；

• 用例动作设置：（图1-161）

4、参考操作步骤2~3为“秋冬新款”的底层复选框添加茭互，不同的是筛选名称为“FilterNewStyle”筛选条件为“[[Item. NewStyle==’True’]]”。

• 事件交互设置：（图1-162）

• 这个案例中商品 “双11活动”的优先级最高，当同时具备“双11活动”与“秋冬新款”属性时优先显示“双11活动”的图标，所以筛选后的效果图中不完全是“秋冬新款”的图标
• 注意本案例条件表达式中“True”要用英文半角的单引号括起来（数字无需这样处理）；
• 本案例中与网站实际内容略有不同；网站中第5列商品为推广商品，与商品列表并非统一列表；本案例中为了排列美观，将商品列表调整为5列

特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页媔中进行下载。

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