Axure中继器组件的使用

中继器的定义

Axure提供中继器部件，用来显示重复的文本、图片和链接，通常用来模拟数据库对数据的增删改查操作，中继器经常应用于显示商品列表信息、联系人信息、用户信息等等。

使用场景

表格信息
文章列表信息
商品图片信息
订单列表信息

中继器绑定数据

以员工信息管理为例，首先建立如图所示的表头：

插入中继器组件，命名为员工信息管理器，并将中继器数据集设置如下：

接下来将中继器的项（双击中继器后显示的单元格）删除，插入单行六列的表格作为中继器的项，其中第一列添加复选框，命名为行内复选框，最后一列加入两个文本标签“修改”“删除”，并设置为突出的蓝色。同时，将每个单元格分别命名，整体效果如图所示：

接下来为中继器添加交互效果，实现数据的绑定，具体步骤如下：
第一步，点击进入中继器交互效果设置页面，选择发生事件“每项加载时”触发动作“设置文本”：

第二步，选择员工编号，单击fx,点击“插入变量或函数”，在下拉列表框中选择中继器中对应数值item.employeeID，后单击确定。

第三步，绑定员工编号后的中继器效果：

按照上述步骤，继续为姓名、部门和职务绑定数据，最终实现中继器数据的绑定。

中继器最终显示效果如下图所示：

在中继器数据绑定的基础上，由于中继器常用做数据库的模拟，首先需要为其设计数据弹出框，用来模拟数据库操作中的“增”操作。

新增数据设计

第一步，组件设计：
首先拖拽一个按钮，文字命名为“新增”；拖拽一个1300✖️1100的动态面板，命名为“员工信息”，状态1命名为“新增修改状态”，状态1中添加1200✖️1000矩阵，命名为遮罩层，填充为黑色，透明度设置为30，用作遮罩。
拖拽340✖️330的矩阵作为弹出框的背景，填充一个背景色，接下来按照如图所示为其添加组件：

其中，文本框分别以idInput、nameInput、departmentInput和jobInput命名。
第二步，交互的设计：
完善上述组件设计后，将动态面板设为隐藏并置于底层，当点击“新增”按钮时显示出来，按上述描述添加交互。

在上述设计完成后，已经实现了单击“新增”按钮弹出对话框的设计，接下来需要将对话框内输入的信息保存到中继器中，需要以下操作：
首先，在填写完信息后，点击弹出对话框的“保存”按钮，实现将信息保存到中继器中并显示出来，需要通过给“保存”按钮添加交互效果实现。
首先添加“单击时”触发中继器动作“添加行”

接下来在添加行中点击“fx”，为该行的每一项添加对应数值，具体操作如图所示：

其中，由于部门的选择是通过下拉列表框实现的，插入数值的方式略有不同，如下图所示：

按照上述设计，可以实现将弹出对话框中填写的信息丰富到中继器中显示出来。
但同时需要注意一点，当保存后，弹出对话框需要被隐藏起来，同时输入框里填写的内容应该清空。另外，当点击弹出输入框的“关闭”时，应该清空输入框里的内容，并将弹出输入框隐藏起来。
具体操作如下，首先为弹出输入框的“保存”按钮新增将动态面板隐藏起来以及清除输入内容的交互效果。

为关闭按钮增加交互效果，对话框里的两个“关闭”按钮的交互可以设计为一样的，即：隐藏弹出框、输入框内容清空。但“保存”右边的关闭辅按钮我决定设计为“暂存”，即点击后隐藏弹出框，但输入框内容不清空，此处不再赘述交互的设计。
预览一下效果，点击“新增”弹出对话框后，对各项信息进行填写

点击“保存”按钮，新填写的信息被显示在中继器中，同时动态面板的遮罩层和弹出对话框被隐藏起来，再次点击新增可以继续填写信息。

小结一下，通过这样对中继器数据弹出框的设计，实现了数据的新增，可以很好地模拟数据库“增删改查”基础操作的增加环节，是中继器动态管理操作的一部分。

删除数据设计

中继器内数据的删除分为两种，分别是行内删除和全局删除两种。
首先实现行内删除：
首先点击进入中继器的项，为行内“删除”按钮添加单击时交互事件：首先在中继器动作中选择标记行，继续添加动作“删除标记的行”，实现中继器行内删除。

接下来设置全局删除，首先拖拽按钮组件放置于“新增”按钮右侧，命名为“删除”。
首先看到表头的“全选”按钮，为其设置单击时下面所有行内选中的选中和不选效果。

要删除勾选的行，需要进行如下交互设计：
首先对中继器的项中的第一列行内复选框添加“选中改变时”交互效果，为true时标记该行，为false时取消标记该行。

接下来为全局删除按钮添加单击时删除标记行交互效果，即可实现全局删除、多行删除。
小结一下，通过对选中行进行标记、再删除标记行，即可实现数据单行、多行和全部删除操作。

修改数据操作

在对数据进行修改前，首先需要在弹出框中显示现有数据，在此基础上对其进行修改，那么首先设计如何点击中继器项内“修改”按钮来弹出对话框。
为“修改”按钮添加显示动态面板并设为顶层交互效果，且单击“修改”时，对应行的数据内容在弹出框里显示出来。交互添加如下图所示：

其中，单行文本框内容的对应显示设置如下：

部门选择的下拉列表框特殊一些，按下图设计即可：

按照上述设计，即可实现单击修改后，弹出动态面板和弹出框，显示选中行目前的各项信息。