1、第9章 用中继器模拟数据库操作Axure RP 原型设计图解微课视频教程互 联 网 职 业 技 能 系 列内 容导 读中继器部件是Axure RP 7.0新增的部件，也有人将中继器称为数据集，因为从表面上看它可以动态存储数据，可以模拟数据库的操作，进行增删改查、搜索、排序和分页操作。这些数据库可以完成的操作，中继器部件同样可以完成。中继器通过动态地管理数据，体现了一种动态的交互效果，提高了用户的体验度，如图所示。内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结4 9.1认识中继器中继器部件可用来显示重复
2、的文本、图片、链接，可以模拟数据库的操作，进行数据库的增删改查。经常会使用中继器来显示商品列表信息、联系人信息、用户信息等。内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结6 9.2.1 中继器布局设计1 、先来制作表格的标题。拖曳一个横向菜单（Classic Menu-Horizontal）部件，第一列作为复选框的选中列，可以选中所有行。拖曳一个复选框部件，文本内容命名为“全选”，标签命名为“全选复选框”，第二列为员工编号，第三列为姓名，第四列为部门，第五列为职位，第六列为操作，字体加粗，灰色（999
3、999）背景。2 、拖曳一个中继器部件，标签命名为“员工信息”，双击进入中继器部件，先来设计它的数据集，需要4列，分别为员工编号、姓名、部门、职务，将它们命名为英文“employeeID”“employeeName”“department”和“job”，添加3行数据，如图所示。7 9.2.1 中继器布局设计3 、接下来要设计中继器的项，也就是重复显示的布局。先删除矩形部件，拖曳一个表格部件，删除两行，留一行就可以了，表格有6列，第一列放置选中复选框，用来作为选中行操作，标签命名为“行内复选框”。4 、最后一列是操作列，提供修改和删除操作。拖曳两个标签部件，文本内容分别命名为“修改”和“删除”，
4、字体颜色设置为蓝色（0000FF），如图所示。8 9.2.2 中继器数据绑定1、中继器数据集和中继器的项编辑完成后，中继器并没有显示数据集里的数据。2 、双击进入中继器，在下方管理区域中选择“中继器项目交互”选项卡，添加“每项加载时”触发事件，先绑定员工编号数据，单击“设置文本”，勾选中继器里的“员工编号”复选框，单击“fx”按钮。3、单击“插入变量”，要给中继器里的员工编号赋值，插入数据集里的员工编号这一列值，这样就可以将数据集里的数据绑定到中继器上，如图所示。9 9.2.2 中继器数据绑定4、用同样的方式绑定姓名、部门、职务这3列。5 、返回“员工信息管理”页面，可以看到已将数据集里的数据
5、绑定到了中继器里，如图所示。内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结11 9.3新增数据弹出框设计1、拖曳一个HTML按钮部件，作为新增数据的按钮；拖曳一个动态面板部件，宽度设置为1200，高度设置为1000，动态面板命名为“员工信息”，状态命名为“新增修改弹出框”，新增和修改都可以使用这个弹出框。2 、进入 “新增修改弹出框”状态，拖曳一个矩形，宽度设置为1200，高度设置为1000，填充为黑色，标签命名为遮罩层，遮罩层一般有半透明的感觉，设置不透明度为30；再拖曳一个矩形部件，作为弹出框的背
6、景，宽度设置成340、高度设置成330，填充为蓝色（0099FF），设置圆角半径3，如图所示。12 9.3新增数据弹出框设计3、拖曳一个标签部件，作为弹出框的标题，文本内容为“员工信息管理”，15号字，加粗，白色字体（FFFFFF）；拖曳一个标签部件，作为关闭按钮，文本内容为“关闭”，放在右侧，15号字，加粗，白色字体（FFFFFF）。4 、拖曳一个矩形部件，作为新增页面的背景，去掉边框，调整大小，中继器数据集里有4列，员工编号、姓名、部门、职务。拖曳一个标签部件，重新命名为“员工编号”，字体加粗；拖曳一个文本框单行部件，标签命名为IDInput，如图所示。13 9.3新增数据弹出框设计5、选
7、中员工编号和输入框，按住Ctrl键向下拖曳复制一个，修改为“姓名”，标签命名为“nameInput”，再复制一个，修改为“部门”，给它设置一个下拉菜单，输入几个下拉选项，标签命名为“departInput”。6 、选中员工编号和输入框，按住C t r l键复制一个，修改为“职务”，标签命名为“jobInput”，需要保存和关闭两个按钮，拖曳两个HTML按钮部件，保存按钮设置得大一些，如图所示。内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结15 9.4中继器新增数据操作1、进入“新增修改弹出框”的状态里
8、，选中“关闭”按钮，给它添加鼠标单击时触发事件，隐藏“员工信息”动态面板，并且将它置于底层，设置员工编号、姓名、职务输入框里的值为空值和设置部门为默认值“办公室”。2 、选中“保存”按钮，给它添加鼠标单击时触发事件，在第二步下面找到中继器的“新增行”操作，勾选“员工信息管理”中继器，再单击“新增行”按钮，如图所示。16 9.4中继器新增数据操作3、弹出“新增行到中继器”对话框，先给中继器数据集里的员工编号赋值，单击“fx”按钮，将“员工编号”输入框里的值赋值给中继器数据集里的员工编号。4 、运用同样的方式给中继器数据集里的姓名、职务、部门赋值，但是在给部门赋值的时候要注意，局部变量赋值方式是通
9、过下拉列表框“选中项值”进行的，其他都是文本输入框，如图所示。17 9.4中继器新增数据操作5、中继器新增数据完成之后，隐藏“员工信息”动态面板，并且将它置于底层，设置“员工编号”“姓名”和“职务”输入框里的值为空值，设置“部门”为默认值“办公室”。6 、按F5键发布看一下效果。单击新增按钮，弹出框显示出来，单击关闭按钮弹出框隐藏起来，插入一条数据，如图所示。内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结19 9.5.1 删除行内数据1、进入“员工信息管理”中继器，选中“删除”按钮，给它添加鼠标单击时
10、触发事件，在第二步中继器下面单击“标记行”操作，勾选“员工信息管理”，将当前行先标记起来。2 、在第二步中继器下面单击“删除行”操作，勾选“员工信息管理”，选中“已标记”，将当前行删除，如图所示。20 9.5.2 删除全局数据1、拖曳一个HTML按钮部件，文本内容命名为“删除”，作为全局删除按钮。2 、进入“员工信息管理”中继器，选中行内复选框，给它添加选中状态改变时触发事件，新增条件，如果选中状态值为true，标记当前行；如果选中状态值为false，取消标记当前行，如图所示。21 9.5.2 删除全局数据3、回到“员工信息管理”页面里，选中全选复选框，给它添加选中状态改变时触发事件，新增条件
11、，如果选中状态值为true，设置行内复选框为选中状态；如果选中状态值为false，设置行内复选框为未选中状态。4 、选中全局删除按钮，给它添加鼠标单击时触发事件，在第二步下面单击“删除行”操作，删除已标记的行，如图所示。内 容导 航9.1 认识中继器9.2 中继器绑定数据9.3 新增数据弹出框设计9.4 中继器新增数据操作9.5 中继器删除数据操作9.6小结小结Summary本章主要学习Axure中继器模拟数据库操作，应当做到以下几点。01OPTION02OPTION03OPTION04OPTION1 学会什么是中继器以及中继器数据集和中继器的项2 学会将中继器数据集里的数据绑定到中继器上，然后在中继器里显示出来。3 学会利用Axure部件制作新增数据弹出框。4 学会利用中继器部件来动态地新增数据操作。05OPTION5 学会使用中继器进行删除行内数据操作和删除全局数据操作谢 谢 观 赏Axure RP 原型设计图解微课视频教程互 联 网 职 业 技 能 系 列
