中继器添加、删除和更新行 | Adding,Deleting and Updating Rows

通过交互动态添加、删除和更新中继器数据集中的数据行。

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

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

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

STEP 1:设置

在中继器练习文件中打开“添加、更新和删除行”页面,在画布中有一个基于中继器的表格,和一个用来给中继器添加行的简单表单。

在这个页面上已经建立了一些元件交互,所以我们在Web浏览器中预览一下页面,看看目前的效果。

首先,在“添加员工”表单中的文本字段中输入一些文本,然后点击“添加”和“清除”按钮。“添加”按钮没有任何作用,但是“清除”按钮可以将文本字段中的所有内容清空。

注意:你会发现,两个按钮都已经设置了鼠标按下的交互样式。

下一步,点击表格中的“×”和铅笔图标,“×”图标还没有任何作用,但是铅笔图标可以显示一组之前隐藏的元件:一个确认图标,一个取消图标,和一些预先填充了所选行数据的文本字段。

你可以编辑这些文本框中的文本,但是确认按钮还不能保存这些更改,它和取消按钮都会在被点击时,只是简单的将文本字段和它们自己隐藏。

在接下来的步骤中,我们就要构建可以使这些页面元素正常工作的交互。

STEP 2:使用“添加”按钮添加行

回到Axure RP中,在画布中点击两次“添加员工”按钮来选中它,第一次点击是选中“添加员工”元件组,第二次点击才是选中按钮本身(或者,你也可以在概要窗格中直接选中按钮)。然后,在检视窗格中的属性页签下,双击“鼠标单击时”来添加一个新的鼠标单击时用例。

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

在右侧“配置动作”栏的底部,点击“添加行”按钮,以打开添加行到中继器对话框,请注意,这个对话框包含了一个表格,其中包含了中继器数据集中的四列:“Name”、“Department”、“HireDate”和“Available”。

点击“Name”下单元格中的“fx”按钮来打开编辑值对话框。

在对话框的下半部分,点击“添加局部变量”,在出现的局部变量设置中,在最右侧下拉列表中选择“添加姓名”文本框元件,保持中间下拉列表的选项为“元件文字”不变,并且,如果你愿意,可以将变量的名称修改为更具描述性的内容。这样在Web浏览器中,可以捕获到输入该文本框中的文本,并将其存储在该动作中的局部变量中。

在编辑值对话框的顶部,点击“插入变量或函数…”,在弹出的菜单中,点击“局部变量”下的新局部变量的名称。请注意,变量名称会出现在对话框顶部的文本区域中,并被双括号括起来,例如“[[LVAR1]]”。

点击“确定”按钮关闭编辑值对话框,回到添加行到终极其中对话框,注意这时候表格中已经增加了一个新行,并且局部变量的名称显示在“Name”列中。

对新行中的“Department”和“HireDate”单元格重复局部变量的步骤。对于“Department”单元格,保存“添加部门”文本框中的文本,对于“HireDate”单元格,保存“添加入职时间”文本框中的文本,对于“Available”单元格,输入“是”(不带引号),以便所有新添加的行默认具有该值。

完成之后,点击“确定”按钮关闭添加至到中继器中对话框,然后再次点击“确定”按钮关闭用例编辑器。

STEP 3:预览

在Web浏览器中预览页面,然后尝试向中继器中添加一些新的数据行。

STEP 4:使用“×”图标删除行

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

在打开的新页签中,在概要窗格中选择“操作行”组合中的“删除行”形状(就是“×”图标),在检视窗格中的属性页签下,双击“鼠标单击时”来添加一个新的鼠标单击时用例。

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

在右侧“配置动作”栏的底部有三个选项,“This”将会删除点击了“×”图标的行,“条件”将允许你通过设置条件删除符合一定条件的行,“已标记”将删除当前已被标记的所有行。

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

STEP 5:预览

在Web浏览器中预览页面,尝试删除中继器中的一些行。

STEP 6:使用“√”图标更新行

回到Axure RP中,在中继器页签下的概要窗格中,选择“编辑组合”元件组中的“保存编辑”形状元件(就是“√”图标),(这样可以在画布中暂时显示隐藏的元件组合)。然后在检视窗格中的属性页签下,双击“鼠标单击时”事件下的“Case1”来为其添加新的动作。

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

在右侧“配置动作”栏的底部,请注意,在这里可以使用与删除动作下相同的三个选项:“This”、“条件”和“已标记”,另外,注意“选择列”下拉列表中包含了中继器数据集的四个列名。在下拉列表中选择一个列名会将其添加到下面的表格中,以便用于更新。

保持“This”选项,然后在“选择列”下拉列表中选择“Name”,在下面的表格中,点击“Value”标题下的“fx”按钮以打开编辑值对话框。

在编辑值对话框的下半部分,点击“添加局部变量”,在出现的局部变量设置中,在最右侧下拉列表中选择“编辑姓名”文本框元件,保持中间下拉列表的选项为“元件文字”不变,如果你愿意,你可以将变量名称修改为更具描述性的内容。这样在Web浏览器中,可以捕获输入到该文本框中的文本,并将其存储为局部变量的值。

在编辑值对话框的顶部,点击“插入变量或函数”,在弹出的菜单中,点击“局部变量”下的新局部变量名称。请注意,这时候变量名称将出现在对话框顶部的文本区域中,并被双括号括起来,例如“[[LAVR1]]”。

点击“确定”按钮关闭编辑值对话框,回到用例编辑器中,注意局部变量的名称将显示在“Value”列中,在“Name”列的右侧。

对“Department”、“HireDate”和“Available”列重复以上步骤。对于“Department”列,保存“编辑部门”文本框中的文本;对于“HireDate”列,保存“编辑入职时间”文本框中的文本;对于“Available”列,保存“编辑在职”文本框中的文本。

完成之后,点击“确定”按钮关闭用例编辑器。

STEP 7:预览

在Web浏览器中预览页面,尝试更新中继器中一些行的数据。

评论(0 个评论)

发表回复

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