中继器的定义
Axure提供中继器部件,用来显示重复的文本、图片和链接,通常用来模拟数据库对数据的增删改查操作,中继器经常应用于显示商品列表信息、联系人信息、用户信息等等。
使用场景
- 表格信息
- 文章列表信息
- 商品图片信息
- 订单列表信息
中继器绑定数据
以员工信息管理为例,首先建立如图所示的表头:
插入中继器组件,命名为员工信息管理器,并将中继器数据集设置如下:
接下来将中继器的项(双击中继器后显示的单元格)删除,插入单行六列的表格作为中继器的项,其中第一列添加复选框,命名为行内复选框,最后一列加入两个文本标签“修改”“删除”,并设置为突出的蓝色。同时,将每个单元格分别命名,整体效果如图所示:
接下来为中继器添加交互效果,实现数据的绑定,具体步骤如下:
第一步,点击进入中继器交互效果设置页面,选择发生事件“每项加载时”触发动作“设置文本”:
第二步,选择员工编号,单击fx,点击“插入变量或函数”,在下拉列表框中选择中继器中对应数值item.employeeID,后单击确定。
第三步,绑定员工编号后的中继器效果:
按照上述步骤,继续为姓名、部门和职务绑定数据,最终实现中继器数据的绑定。
中继器最终显示效果如下图所示:
在中继器数据绑定的基础上,由于中继器常用做数据库的模拟,首先需要为其设计数据弹出框,用来模拟数据库操作中的“增”操作。
新增数据设计
第一步,组件设计:
首先拖拽一个按钮,文字命名为“新增”;拖拽一个1300✖️1100的动态面板,命名为“员工信息”,状态1命名为“新增修改状态”,状态1中添加1200✖️1000矩阵,命名为遮罩层,填充为黑色,透明度设置为30,用作遮罩。
拖拽340✖️330的矩阵作为弹出框的背景,填充一个背景色,接下来按照如图所示为其添加组件:
其中,文本框分别以idInput、nameInput、departmentInput和jobInput命名。
第二步,交互的设计:
完善上述组件设计后,将动态面板设为隐藏并置于底层,当点击“新增”按钮时显示出来,按上述描述添加交互。
在上述设计完成后,已经实现了单击“新增”按钮弹出对话框的设计,接下来需要将对话框内输入的信息保存到中继器中,需要以下操作:
首先,在填写完信息后,点击弹出对话框的“保存”按钮,实现将信息保存到中继器中并显示出来,需要通过给“保存”按钮添加交互效果实现。
首先添加“单击时”触发中继器动作“添加行”
接下来在添加行中点击“fx”,为该行的每一项添加对应数值,具体操作如图所示:
其中,由于部门的选择是通过下拉列表框实现的,插入数值的方式略有不同,如下图所示:
按照上述设计,可以实现将弹出对话框中填写的信息丰富到中继器中显示出来。
但同时需要注意一点,当保存后,弹出对话框需要被隐藏起来,同时输入框里填写的内容应该清空。另外,当点击弹出输入框的“关闭”时,应该清空输入框里的内容,并将弹出输入框隐藏起来。
具体操作如下,首先为弹出输入框的“保存”按钮新增将动态面板隐藏起来以及清除输入内容的交互效果。
为关闭按钮增加交互效果,对话框里的两个“关闭”按钮的交互可以设计为一样的,即:隐藏弹出框、输入框内容清空。但“保存”右边的关闭辅按钮我决定设计为“暂存”,即点击后隐藏弹出框,但输入框内容不清空,此处不再赘述交互的设计。
预览一下效果,点击“新增”弹出对话框后,对各项信息进行填写
点击“保存”按钮,新填写的信息被显示在中继器中,同时动态面板的遮罩层和弹出对话框被隐藏起来,再次点击新增可以继续填写信息。
小结一下,通过这样对中继器数据弹出框的设计,实现了数据的新增,可以很好地模拟数据库“增删改查”基础操作的增加环节,是中继器动态管理操作的一部分。
删除数据设计
中继器内数据的删除分为两种,分别是行内删除和全局删除两种。
首先实现行内删除:
首先点击进入中继器的项,为行内“删除”按钮添加单击时交互事件:首先在中继器动作中选择标记行,继续添加动作“删除标记的行”,实现中继器行内删除。
接下来设置全局删除,首先拖拽按钮组件放置于“新增”按钮右侧,命名为“删除”。
首先看到表头的“全选”按钮,为其设置单击时下面所有行内选中的选中和不选效果。
要删除勾选的行,需要进行如下交互设计:
首先对中继器的项中的第一列行内复选框添加“选中改变时”交互效果,为true时标记该行,为false时取消标记该行。
接下来为全局删除按钮添加单击时删除标记行交互效果,即可实现全局删除、多行删除。
小结一下,通过对选中行进行标记、再删除标记行,即可实现数据单行、多行和全部删除操作。
修改数据操作
在对数据进行修改前,首先需要在弹出框中显示现有数据,在此基础上对其进行修改,那么首先设计如何点击中继器项内“修改”按钮来弹出对话框。
为“修改”按钮添加显示动态面板并设为顶层交互效果,且单击“修改”时,对应行的数据内容在弹出框里显示出来。交互添加如下图所示:
其中,单行文本框内容的对应显示设置如下:
部门选择的下拉列表框特殊一些,按下图设计即可:
按照上述设计,即可实现单击修改后,弹出动态面板和弹出框,显示选中行目前的各项信息。