中继器标记行 | Marking Rows

标记特定的中继器行,使其具备一定的视觉效果和可变成型,以便进行后续的操作。

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

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

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

STEP 1:设置

在中继器练习文件中打开“标记行”页面,在画布上有一个基于中继器的表格,一个复选框元件和一个按钮元件。我们将使用“筛选已标记”复选框,通过已标记的行来筛选中继器,并且我们将使用“删除已标记”按钮从中继器中一次删除所有被标记的行。

STEP 2:选择时标记行

在画布上点击两次“员工”中继器元件将其选中,第一次点击是选中“动态表格”元件组,第二次点击才是选中中继器本身(或者,你也可以在概要窗格中直接选中它),然后双击它打开中继器项目进行编辑。

在打开的新页签中,选择“标记行”复选框元件,然后在检视窗格中的属性页签下,双击“选中时”来添加一个新的选中时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“标记行”(位于“中继器>数据集”下面),在右侧“配置动作”栏中选择“员工”中继器元件。

在右侧“配置动作”栏的底部有三个选项:“This”将标记复选框被选中的行,“全部”将标记中继器中所有的行,“条件”将允许你使用过滤条件来标记符合当前规则的行。

保持“This”选项,然后点击“确定”按钮关闭用例编辑器。

STEP 3:取消选择时取消标记行

在“标记行”复选框被选中的状态下,双击检视窗格中属性页签下的“取消选中时”来添加一个新的取消选中时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“取消标记”(位于“中继器>数据集”下面),在右侧“配置动作”栏中选择“员工”中继器元件。

在右侧“配置动作”栏的底部,注意这三个和“标记行”动作中相同的选项,这次我们同样保持“This”选项,因为我们只想将其作用到未选中复选框的中继器行。

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

STEP 4:当行被标记时勾选复选框

每当中继器刷新时,中继器项目中的元件都会恢复到其默认状态,当把排序和筛选应用到中继器或取消应用时,以及添加、删除或更新行时,就会发生这种情况。因此,我们需要在中继器刷新后,再次确认标记行中的“标记行”复选框被选中。

在“标记行”复选框被选中的状态下,点击检视窗格中属性页签下的“更多事件>>>”下拉列表,在下拉列表的底部,点击“载入时”来添加一个新的载入时用例。

在用例编辑器的顶部,点击“添加条件”按钮来打开条件设立窗口。

在条件设立窗口中,将第一个下拉列表的选项设置为“值”,这样会将第二个下拉列表改为文本框,点击文本框右侧的“fx”按钮以打开编辑文本对话框。

在对话框的顶部,点击“插入变量或函数…”,在弹出的菜单中,点击“中继器/数据集”下的“isMarked”,注意这时候编辑文本对话框顶部的文本框中将会出现“[[Item.isMarked]]”,然后点击“确定”按钮关闭对话框。

回到条件设立窗口中,在最右侧的文本框中输入“true”(不含引号),以使条件描述显示为“if “[[Item.isMarked]]” equals “true””,当中继器的行被标记时,这个条件就会成立。

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

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

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

STEP 5:筛选标记行

现在我们可以中继器中标记和取消标记行,我们可以开始使用这些行了。

再次点击“标记行”页签,回到页面画布中,选中“筛选已标记”复选框元件,然后双击检视窗格中属性页签下的“选中时”来添加一个新的选中时用例。

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

在右侧“配置动作”栏的底部,取消“移除其他筛选”的勾选,并且在“名称”文本框中输入“筛选已标记”(不含引号),然后点击“条件”文本框右侧的“fx”按钮以打开编辑值对话框。

在对话框的顶部,点击“插入变量或函数…”,在弹出的菜单中,点击“中继器/数据集”下的“isMarked”,注意这时候对话框顶部的文本框中将出现“[[TargetItem.isMarked]]”。在双括号内的“isMarked”后面输入“==true”(不含引号),以使表达式显示为“[[TargetItem.isMarked==true]]”。这个表达式将查找中继器中所有已标记的行,并且筛选器仅显示那些行。

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

接下啦,按照“按名称取消筛选”的步骤(《筛选行》文章中的STEP3),使用“筛选已标记”复选框元件的取消选中时事件,来移除“筛选已标记”筛选器。

STEP 6:预览

在Web浏览器中预览页面,选择中继器中的一些行以标记它们,然后勾选“通过标记筛选表格”复选框,以将“筛选已标记”筛选器应用到中继器上。这时候你只能看到那些复选框被选中的行。

然后,取消“通过标记筛选表格”复选框的勾选,以从中继器上移除“筛选已标记”筛选器。

STEP 7:删除标记行

回到Axure RP中,选中“删除标记行”按钮元件,并且双击检视窗格中属性页签下的“鼠标单击时”用例来添加一个新的鼠标单击时用例。

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

在右侧“配置动作”栏的底部有两个选项,“条件”将允许是使用过滤条件来删除满足指定条件的行,“已标记”将删除所有当前已标记的行。

选择“已标记”并点击“确定”按钮关闭用例编辑器。

STEP 8:预览

在Web浏览器中预览页面,选择中继器中的一些行以标记它们,然后点击“删除标记行”按钮来删除这些已标记的行。

评论(0 个评论)

发表回复

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