中继器行筛选 | 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. 点击“取消筛选”按钮,中继器的数据行又会恢复到默认状态。
评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注