向中继器数据集增加行和列并在单元格中录入数据,在中继器条目中的元件上显示数据集的值,以此来创建动态表格。
如果你不熟悉中继器元件,你可以在我们的中继器元件参考指南中了解它的功能和使用方法。
STEP 0:下载中继器练习文件
如果你还没有练习文件,请下载Axure中继器练习文件.rp并在Axure RP中打开它,该文件包含了Axure中继器教程中对应的每个页面。
STEP 1:设置
在中继器练习文件中打开“中继器基础应用-动态表格”页面,在画布上有一个名为“动态表格”的元件组合,组合中包含了四个用于表格标题的矩形元件,和一个用于表格主体的行颜色交替的中继器元件。
让我们先来看一下中继器的当前设置。
在画布上点击两次“员工”中继器以选中它,第一次点击是选中“动态表格”组合,第二次点击才是选中“员工”中继器本身(或者你也可以直接在概要窗格中选中中继器),然后在检视窗口中的属性页签下,向下滚动以查看中继器的数据集。
注意数据集包含了画布上表格四列中的三列:“姓名”、“部门”和“入职时间”,我们将在下一步为中继器添加第四列:“在职”。
另外请注意,数据集中单元格里的信息已经显示在了画布上的中继器中,这是通过中继器的“每项加载时”用例实现的,该用例将中继器条目中的三个元件上的文本设置为其对应的数据集中的值,“姓名”矩形框上的文本设置为“[[Item.Name]]”,“部门”矩形框上的文本设置为“[[Item.Department]]”,“入职日期”矩形框上的文本设置为“[[Item.HireDate]]”。
STEP 2:添加新的数据列
在中继器的数据集中,向右滚动直到看到“添加列”标题,点击这个标题然后录入“在职”,之后按下回车键,这样就可以创建一个新的数据列。
给新列中的单元格添加值,依次选中每个单元格录入即可,将“是”或“否”(不带引号)填写到“在职”列中的每个单元格中。
STEP 3:在画布上显示列数据
要将该列的数据显示在画布上,我们需要将它设置为中继器条目中元件上的文本,并且要通过中继器的每项加载时事件来实现。该中继器已经在这个事件下有了一个用例,所以在检视窗格中的属性页签下,双击“每项加载时”下面的“Case1”来编辑这个用例。
在用例编辑器中,选择“组织动作”栏中的设置文本动作,然后在右侧“配置动作”栏中选择“员工”中继器下的“在职”矩形元件,在这一栏的底部,点击“fx”按钮打开编辑文本对话框。
在对话框中,删除顶部文本框中的内容,然后点击“插入变量或函数…”,在出现的下拉列表中,点击“中继器/数据集”下面的“Item.Available”,注意这时候在对话框的顶部文本框中会出现“[[Item.Available]]”。
点击“确定”按钮关闭编辑文本对话框,然后再次点击“确定”按钮关闭用例编辑器,注意这时候中继器的“在职”列的值已经显示在画布上了。
STEP 4:添加新的数据行
现在,我们已经设置好了中继器数据集中的所有列,接下来再给它添加一些行。
在中继器的数据集中,向下滚动直到你在第一列“姓名”的底部看到“添加行”,点击这个单元格并给它录入一个新的值,然后按下[Tab]键,就会给数据集添加一个新的数据行。
为这一行的每一列填写一个值,然后再多添加几行,注意画布上的中继器会不断的显示新的行和数据。