过滤中继器行-Axure教程

在本教程中，您将学习如何通过过滤中继器元件以仅显示满足特定条件的行。

单击此处下载本教程的完整 RP 文件

1.元件设置

1. 打开一个新的 RP 文件并在画布上打开Page 1。

2. 将一个矩形元件拖到画布上，右键单击它，然后从上下文菜单中选择创建中继器。

3. 编辑数据集中的数据，分别输入1-5的数字。

4. 将按钮元件拖到画布上，然后将按钮上的文本设置为Add Filter。

2.按常数值过滤

1. 选择“Add Filter”按钮元件，然后在交互窗格中单击新建交互。

2. 在出现的列表中选择单击事件，然后选择添加过滤动作。

3. 在目标下拉列表中选择中继器元件。

4. 在过滤规则下拉列表中，第一行即对比列中选择Column1。

5. 第二行即比较规则中选择小于。

6. 第三行即比较目标类型中选择文本值。

7. 第四行直接输入4。

8. 单击确定以保存动作。

3. 预览交互

预览页面，点击“Add Filter”按钮过滤中继器行。“4”和“5”矩形会消失。

4. 按动态值过滤

1. 回到 Axure RP，向画布添加一个文本框元件。

2. 选择文本框，单击交互窗格中的新建交互。

3. 在出现的列表中选择文本改变事件，然后选择添加过滤动作。

4. 在目标下拉列表中选择中继器元件。

5. 在过滤规则下拉列表中，第一行即对比列中选择Column1。

6. 第二行即比较规则中选择小于。

7. 第三行即比较目标类型中选择元件的文本。

8. 第四行即比较目标中选择文本框元件。

9. 单击确定以保存动作。

5. 预览交互

1. 再次预览页面并在文本框中输入4。中继器应仅显示矩形“3”及以下。

2. 在文本框中输入5。中继器现在应该显示矩形“4”及以下。

6. 移除过滤

1. 回到 Axure RP，将另一个按钮元件拖到画布上并将其文本设置为Remove Filter。

2. 选择按钮后，单击交互窗格中的新建交互。

3. 在出现的列表中选择单击事件，然后选择移除过滤动作。

4. 在目标下拉列表中选择中继器元件。

5. 选择全部单选按钮并单击确定以保存动作。

如果仅删除一个特定过滤器，您可以选择第二个单选按钮并选择对应的过滤名称。当您将多个过滤器同时应用于中继器时，这会很有用。

7. 预览交互

1. 预览页面，点击“Add Filter”按钮过滤中继器行。

2. 单击“Remove Filter”按钮将中继器恢复到默认状态。

—— 作者：Axure工坊，智新信息科技(广州)有限公司旗下的原创软件与互联网原型作品、素材、模板的共享交易平台，提供PC、APP、小程序、WEB等各端及电商、O2O、门户网、大数据等各行业的原型设计资源。

—— 官网：www.axured.cn

—— Axure交流群：681760590

—— 作品中心：原型作品及元件库下载