中继器行排序 | Sorting Rows

通过任意数据列,给中继器的行动态排序,可以按文本、数字或日期进行排序。

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

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

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

STEP 1:设置

在中继器练习文件中打开“排序”页面,在画布上有一个名为“动态表格”的元件组合,组合中包含了四个用于表格标题的矩形元件,和一个用于表格主体的行颜色交替的中继器元件。

我们将使用标题矩形的“鼠标单击时”事件来对中继器进行排序,由于一次只能在中继器上使用一种排序,因此我们要向用户指出当前使用的那种排序,我们可以通过已经设置好的标题矩形的选中样式来实现。另外标题已经被添加到了一个选项组中,这样可以在选中一个标题时,自动将其他标题取消选中。

STEP 2:按列排序

在画布上点击两次“姓名标题”矩形来将其选中,第一次点击是选中“动态表格”组合,第二次点击才是选中矩形本身(或者,你也可以在概要窗格中直接选中矩形)。然后在检视窗格中的属性页签下,双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“选中”(位于“设置选中”下面),在右侧“配置动作”栏下选择“当前元件”,这样可以将矩形设置为选中状态,以便激活它的选中样式。

回到左侧的“添加动作”栏,点击“中继器”下的“添加排序”,在右侧“配置动作”栏中选择“员工”中继器。

在右侧“配置动作”栏底部,可以给排序输入一个名称,如果你输入了一个名称,这个名称就会显示在检视窗格中属性页签下的动作描述中,如果你没有输入名称,那么动作描述就会列出下面下拉列表的选项。

排序的实际功能是由下拉列表定义的,将“属性”下拉列表的选项设置为“Name”,这是数据集中我们用于排序的列。然后将“排序类型”下拉列表的选项设置为“Text”,“顺序”下拉列表的选项设置为“切换”,这样可以在每次点击“姓名标题”矩形时,按照字母排序进行升序和降序的切换。请注意,你可以在出现的“默认”下拉列表中选择初始的排序方式。

点击“确定”按钮管理用例编辑器。

STEP 3:预览

在浏览器中预览页面,点击“姓名”几次来测试我们的排序功能。

STEP 4:给其他的标题元件添加排序交互

对另外三个标题元件重复STEP 2,将“部门”和“在职”按照“Text”排序,将“入职时间”按照“Date-YYYY-MM-DD”排序,然后在浏览器中测试每个排序,以保证它们能正常工作。

STEP 5:取消排序

回到Axure RP中,选中“取消排序”矩形元件,然后在检视窗格中的属性页签下双击“鼠标单击时”来添加一个新的鼠标单击时用例。

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

在右侧“配置动作”栏的底部,你可以选择移除所有排序或者按按名称移除排序,我们想移除所有排序,所以勾选一下“移除全部排序”的复选框。

因为我们要取消中继器的排序,所以我们还需要将所有的标题矩形设置为它们之前未选中的状态。回到用例编辑器中的左侧“添加动作”栏,点击“设置选中”下的“取消选中”,在右侧“配置动作”栏,选择所有标题矩形元件。

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

STEP 6:预览

在浏览器中预览页面,点击一个标题元件来给中继器添加排序并且显示“取消排序”矩形,然后点击“取消排序”矩形来测试我们新的交互。

评论(0 个评论)

发表回复

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