中继器行筛选 | Filterring Repeater Rows

在本教程中，你将学习如何过滤中继器元件，只显示符合特定条件的行。【原型预览】

备注：如果你对中继器元件不太熟悉，你可以在这里了解中继器的功能和用法：中继器元件。

1、元件设置

1. 打卡一个新的RP文件，并在画布中打开Page 1。
2. 拖拽一个中继器元件和一个按钮元件到画布中。
3. 设置按钮名称为“筛选”。
4. 选中中继器元件，在样式面板中，给中继器数据集添加两行数据，设置Column0的值分别为4和5。

2、按常量值过滤

1. 选中“筛选”按钮元件，点击交互面板中的新建交互。
2. 在弹出的列表中选择单击时事件，然后选择添加筛选动作。
3. 在目标下拉列表中选择中继器元件。
4. 在名称字段中，输入“小于4”。
5. 在规则字段中，输入“[[Item.Column0<4]]”。括号中的表达式将过滤掉所有Column0的值小于4的数据行。
6. 点击确定按钮保存操作。

3、预览交互

预览页面，点击“筛选”按钮来筛选中继器中的行，4和5矩形将会被过滤掉不再显示。

4、按变量值过滤

1. 回到Axure RP中，向画布中添加一个文本框元件。
2. 在文本框元件被选中的情况下，点击交互面板中的新建交互。
3. 在弹出的列表中选择文本改变时事件，然后选择添加筛选动作。
4. 在目标下拉列表中选择中继器元件。
5. 在名称字段中，输入“小于用户输入值”。
6. 在规则字段中，输入“[[Item.Column0<This.text]]”。括号中的表达式将过滤掉中继器中所有Column0的值小于用户输入的值的数据行。
7. 点击确定按钮保存操作。

5、预览交互

1. 预览页面，在文本框中输入4，中继器就会只显示3及以下的矩形框。
2. 在文本框中输入5，中继器就会只显示4及以下的矩形框。

6、取消筛选

1. 回到Axure RP中，再拖拽一个按钮元件到画布中，设置它的名称为“取消筛选”。
2. 在按钮元件被选中的状态下，点击交互面板中的新建交互。
3. 在弹出的列表中选择单击时事件，然后选择移除筛选动作。
4. 在目标下拉列表中选择中继器元件。
5. 选择过滤下的全部选项，点击确定按钮保存操作。

备注：如果想移除某个特定的筛选，你可以选择第二个选项，然后在文本框中输入筛选的名称。这种方法通常用在统一时间对中继器应用了多个筛选的情况。

7、预览交互

1. 预览页面，点击“筛选”按钮筛选中继器中的数据行。
2. 点击“取消筛选”按钮，中继器的数据行又会恢复到默认状态。