中继器行筛选 | Filtering Rows

动态筛选中继器元件,只显示符合条件的数据行。

如果你不熟悉中继器元件,你可以在我们的中继器元件参考指南中了解它的功能和使用方法。

STEP 0:下载中继器练习文件

如果你还没有练习文件,请下载Axure中继器练习文件.rp并在Axure RP中打开它,该文件包含了Axure中继器教程中对应的每个页面。

STEP 1:设置

在中继器练习文件中打开“筛选行”页面,在画布上是一个基于中继器的表格和一组用于筛选中继器的表单元件,我们将使用单选按钮元件根据中继器的“在职”列进行筛选,以及使用下拉列表元件根据中继器的“部门”列进行筛选。

STEP 2:通过固定值(hard-code)进行筛选

让我们先从单选按钮元件开始,请注意,这些按钮已经被添加到单选按钮组,以便选择一个按钮的时候可以自动将其他按钮取消选择,另外,“全部”按钮已经处于选中状态,以便中继器在未筛选的状态下显示在浏览器中。

在画布上点击两次“筛选在职”单选按钮将其选中,第一次点击是选中“筛选控件”组合,第二次点击才是选中单选按钮本身(或者,你也可以在概要窗格中直接选中该单选按钮)。然后在检视窗格中的属性页签下,双击“选中时”来添加一个新的选中时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“添加筛选”(位于“中继器”下面),然后在右侧“配置动作”栏中选择“员工”中继器。

在右侧“配置动作”栏的底部,取消“移除其他筛选”的勾选,因为在下一步我们将设置一个不同的筛选器,并且和当前这个筛选器关联使用,所以我们不希望在应用这个筛选器的时候移除其他筛选器。

在“名称”文本框中输入“筛选在职员工”(不包含引号),然后在“条件”文本框中输入“[[Item.Available==’是’]]”(不包含引号),这个表达式将查找所有“在职”列的值为“是”的中继器数据行,并且筛选结果将只显示这些行。(如果你想筛选结果不显示这些行,可以加将表达式中的“==”改成“!=”。)

点击“确定”按钮关闭用例编辑器。

在“筛选离职”单选按钮上重复以上步骤,录入筛选名称为“筛选离职员工”,并且使用条件表达式“[[Item.Available==’否’]]”。

备注:或者,如上所述,你也可以使用表达式“[[Item.Available!=’是’]]”。

STEP 3:按名称取消筛选

再次选中“筛选在职”单选按钮,然后点击检视窗格中属性页签下的“取消选中时”,来添加一个新的取消选中时用例。

在用例编辑器中,点在左侧“添加动作”栏中的“移除筛选”(位于“中继器”下面),然后在右侧“配置动作”栏中选择“员工”中继器元件。

我们只想取消刚刚设置的筛选,所以在右侧“配置动作”栏的底部“被移除的筛选名称”后的文本框中输入“筛选在职员工”。

点击“确定”按钮关闭用例编辑器。

在“筛选离职”单选按钮上重复以上步骤,取消“筛选离职员工”的筛选。

STEP 4:预览

在Web浏览器中预览页面,点击“在职”单选按钮将它选中,对中继器应用“筛选在职员工”的条件,这时候你将只能看到“在职”列的值为“是”的数据行。

然后点击“离职”单选按钮将它选中,对中继器应用“筛选离职员工”的条件。请注意,这时候“在职”当选按钮将自动取消选中,所以“筛选在职员工”的条件自动被移除,这时候你只能看到“在职”列的值为“否”的数据行。

最后,点击“全部”单选按钮以取消“离职”单选按钮的选中状态,从而将中继器上“筛选离职员工”的条件移除。

STEP 5:通过变量值筛选

就像Axure RP中的其他值表达式一样,中继器的过滤规则可以通过变量从原型中的不同地方动态取值。

回到Axure RP中,在画布上点击两次“部门筛选器”下拉列表以选中它,第一次点击是选中“筛选控件”组合,第二次点击才是选中下拉列表本身(或者,你也可以在概要窗格中直接选中下拉列表)。然后在检视窗格中的属性页签下,双击“选项改变时”来添加一个新的选项改变时用例。

在用例编辑器的顶部,点击“添加条件”按钮以打开条件设立对话框。

在条件设立对话框中,修改第三个下拉列表的选项为“!=”,以使条件描述显示为“if 备选项于 This != 全部”,当下拉列表元件的当前选项不是“全部”是,这个条件就会成立。我们只想在下拉列表中选择了部门名称进行筛选。

点击“确定”按钮关闭条件设立窗口。

回到用例编辑器中,在左侧“添加动作”栏中点击“添加筛选”(位于“中继器”下面),在右侧“配置动作”栏中选择“员工”中继器元件。

在右侧“配置动作”栏的底部,取消“移除其他筛选”的勾选,因为我们想将这个筛选器和“在职/离职”筛选器一起使用。

在“名称”后的文本框中输入“按部门过滤”(不包含引号),然后点击“条件”文本框右侧的“fx”按钮以打开编辑值对话框。

在对话框偏下方的区域点击“添加局部变量”,在下面出现的局部变量设置中,将中间下拉列表的选项设置为“被选项”,并且保持最右边下拉列表的选项为“This”。这样在浏览器中,通过这个动作可以捕捉到下拉列表的当前选项,并将它存储在局部变量中。

在编辑值对话框的顶部文本框中输入“[[Item.Department == LVAR1]]”(不包含引号),这个条件会在中继器中查找所有“部门”列的值等于下拉列表当前所选项的数据行,并且自筛选中只显示这些行。

点击“确定”按钮关闭编辑值对话框,然后再次点击“确定”按钮关闭用例编辑器。

STPE 6:取消按变量筛选

在“部门筛选器”下拉列表被选中的状态下,双击检视窗格中属性页签下的“选项改变时”来添加第二个选项改变时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“移除筛选”(位于“中继器”下面),在右侧“配置动作”栏中选择“员工”中继器元件。

在右侧“配置动作”栏的底部,在“被移除的筛选名称”文本框中输入“按部门筛选”(不包含引号),然后点击“确定”按钮关闭用例编辑器。

请注意,即使我们没有为这个用例设置条件,它仍然会显示一个“Else If True”的条件,当第一用例的条件没有发生时,将会触发这个用例,也就是在下拉列表的选项是“所有”的时候触发。

STEP 7:预览

在你的Web浏览器中预览页面,在“部门筛选器”下拉列表中选择一个部门名称,来对中继器应用“按部门筛选”条件,这时候你将只能看到“部门”列的值和下拉列表所选部门的值相同的数据行。

然后,在下拉列表中选择“所有”,以便取消中继器的“按部门筛选”条件。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。