跳到主要内容

过滤行

在本教程中,你将学习如何过滤中继器部件以仅显示满足特定条件的行。

注意

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

1. 部件设置


  1. 打开一个新的 RP 文件并在画布上打开 Page 1。
  2. 将一个矩形小部件拖到画布上,右键单击它,然后从上下文菜单中选择“创建中继器”。
  3. 添加两行,然后编辑要从 1-5 编号的 Column1 单元格
  4. 将按钮上的文本设置为“添加过滤器”。

2.按常数过滤



1. 选择“添加过滤器”按钮部件,然后在“交互”窗格中单击“新建交互”。
2. 在出现的列表中选择点击事件,然后选择添加过滤操作。
3. 在目标下拉列表中选择中继器部件。
4. 在名称字段中,输入小于4。
5. 在“规则”字段中,输入[[Item.Column1 <4]]。 该括号表达式将过滤出Column1值小于4的所有行。
6. 单击确定以保存操作。

3. 预览交互


预览页面,然后单击“添加过滤器”按钮以过滤中继器。 “ 4”和“ 5”矩形应消失。

4. 按动态值过滤


  1. 返回Axure RP,将文本输入框部件添加到画布。
  2. 选择文本输入框后,在“交互”窗格中单击“新建交互”。
  3. 在出现的列表中选择“文本改变”事件,然后选择“添加筛选”操作。
  4. 在目标下拉列表中选择中继器部件。
  5. 在名称字段中,输入小于用户输入。
  6. 在“规则”字段中,输入[[Item.Column1 <This.text]]。 该括号表达式将过滤出Column1值小于在文本输入框中输入的值的所有行。
  7. 单击确定以保存操作。

5. 预览交互


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

6. 移出筛选


  1. 返回 Axure RP,将另一个按钮小部件拖到画布上并将其文本设置为移除过滤器。
  2. 选择按钮后,单击交互窗格中的新建交互。
  3. 在出现的列表中选择 Click 或 Tap 事件,然后选择 Remove Filter 操作。
  4. 在目标下拉菜单中选择中继器小部件。
  5. 选择“All”单选按钮并单击确定以保存操作。

7. 预览交互


  1. 预览页面,点击“添加过滤器”按钮,对中继器进行过滤。
  2. 单击“移除过滤器”按钮,将中继器恢复到默认状态。