Axure RP 中继器可以保留数据，可以对数据进行增加、删除操作，还可以插入变量，进行更复杂的操作。
一、中继器基础功能讲解
1、中继器结构与原理详解
中继器（repeater）英文为“重复”的意思，在Axure中可以理解为重复的使用同一个模板，通过向行列数据矩阵中进行数据处理后展示的小型数据库。
中继器这个元件，对很多人来说是个难点。
但实际上，只要理解它的结构和工作原理，使用起来非常简单。
首先，我们将中继器元件拖入画布，是下方这个样子。
看上去，这个元件由三个纵向排列的矩形组成。
这样的一个元件，怎么使用？
这里大家可以记住一句话：任何一个元件如果不会使用，先双击试试看。
当我们双击了中继器这个元件，在画布中，又打开了一个新的编辑区。
这个编辑区，是中继器内部内容的编辑区。
大家能够看到，在这个编辑区中，自带了一个矩形元件。
那么，这个矩形元件和我们刚才在页面中看到的中继器元件，有什么关联？
我们在这个编辑区中，我们把矩形随意挪动一下位置，并且再放入一个图片元件（或者其他元件），然后点画布上方的标签，切换回页面的编辑区。
这个时候，大家能够看到在页面中，之前的三个矩形矩形也移动了位置，并且新增了三个相同的图片元件。
看到这里，大家一定能够理解到，中继器内部的内容决定了页面中显示的内容。
不过，在页面中并不是一项内容，而是三项。
为什么在中继器中的一项内容，在页面中变成了三项？
这是由哪里控制的呢？
我们点中中继器这个元件，观察它的属性。
在它的属性中，有一个区域，好像表格。
这个区域叫“数据集”。
在这个区域中，大家能够看到，默认有一列三行的数据。
我给中继器的定义：中继器是一个重复列表项的元件。
如上图所示，默认情况下，中继器显示的列表项的数量与数据集中数据行的数量相一致。
所以，大家可以做一下尝试，在数据集中添加行或删除行的话，列表项也会相应的增加或减少。
另外，大家也能够注意到，中继器列表项的内容并不完全一样，上面显示的数字是不相同的。
不过，通过上图，大家也能够发现，列表项中矩形显示的数字，就是数据集中每一行“Column0”这一列的列值。
那么，这个列值是怎么关联到矩形上的呢？
如果要改变矩形的文字，我们就要通过【设置文本】的动作，去设置这个元件的文字。
不过，在什么时候，如何去设置这个矩形的文字为不同的列值？
我们可以在概要面板中，将中继器内部的矩形命名。
例如：
DefaultShape
然后，在中继器属性面板的顶部，大家能够看到默认有一些交互的设置。
这个设置是【每项加载时】，【设置文本】于矩形“DefaultShape”为“[[Item.Column0]]”。
首先，先来说说每项加载时这个触发事件，它体现了中继器的工作原理。
中继器这个元件，在页面中加载的时候，会读取数据集。
如果发现数据集存在数据，就将第一行数据读取出来，通过交互设置将数据与编辑区中的元件关联，生成列表项的第一项，
然后，再次读取数据集中的第二行，将数据通过交互设置与编辑区中的元件关联，生成列表项的第二项。以此类推，知道读取完所有的数据行后，停止列表项的生成加载。
所以，这个触发事件叫【每项加载时】。
那么，这个触发事件里面的动作，大家就能够理解是将数据集的数据与编辑区的元件进行关联。
不过，这个动作中有一个关键的内容就是“[[Item.Column0]]”。
Item是一个系统变量，中继器每个列表项加载时，所读取一行数据，都会存入这个系统变量。
Column0是列名。
Item.Column0就是指一行数据中Column0这一列的列值。
这个列值，在读取每一行数据时都是不同的。
所以，通过这样的交互，完成数据集数据与编辑区元件的关联，我们才看到了每一项中不同的内容。
最后，当我们在中继器数据集中添加新的行与列值的时候，中继器的列表项会随之增加。
这些列表项默认是垂直排列的。
那么，能不能让它水平排列，并且能够达到一定数量折行呢？
就好像某些商品列表一样，一排几个进行排布呢？
我们，点中中继器元件，然后在检视面板中，切换到样式的设置。
在这里，我们可以设置中继器列表的布局为【水平】布局。
勾选【网格排布】后，通过数量的设置，就能实现一定数量折行的效果。
另外，在这部分设置中，我们还可以设置列表项的背景色、交替背景色，列表项内容的多页显示，列表项之间的行间距、列间距等等。
综上所述，我们来总结一下中继器的基本组成，这也是中继器基础操作主要步骤。
1、内部编辑区
在中继器内部的编辑区中，我们要先创建列表项的模板内容。
这个模板内容决定每一个列表项中的元件组成结构。
2、数据集
在数据集中，我们要添加列表项的数据内容（含文字、图片以及引用页面）。
3、交互
在交互设置中，将数据集的内容与内部编辑区中模板元件建立关联。
4、样式
在样式设置中，我们可以对列表的布局、背景、分页以及列表项间距进行设置。
通过以上四部分内容以及相关的操作，才能够正确、完整的使用中继器这个元件。
备注：前三部分内容与步骤是必须的，样式的设置在某些应用中无需设置。
以上就是对中继器组成结构与工作原理的解析。
2、中继器限制重复添加数据
中继器能够模拟一些列表项添加、删除与修改的操作。
在一些添加的操作中，往往需要限制重复添加。
例如，添加用户数据，会包含用户的
id和姓名。姓名是允许重复的，因为可能出现同名同姓的人。
但是，id一般都是唯一的，不会允许重复。
这样在出现姓名相同的用户时，可以通过唯一的
id进行区分。当我们模拟添加数据的操作时，也要考虑到这种需求，验证新添加的数据是否与已有数据重复。
接下来的案例，就是在添加数据时，要保证id是唯一的。
所以，我们需要能够获取所有已有id，通过条件判断来验证新添加的id是否已存在，只有id不存在，才能添加新的数据。
第一步，我们准备元件。
页面中：
中继器“List”中：
第二步，为中继器“List”的数据集添加一些数据。
第三步，将中继器数据集中的数据和模板中的元件，通过交互进行关联。
第四步，为了能够知道中继器中都包含了哪些已有id，我们可以在中继器【每项加载时】，将当前一项的id增加到元件“AllStuId”的文本中，并且将id用花括号分隔开，以免混在一起无法分辨。
我们通过动作【设置文本】于元件“AllStuId”为“[[Target.text]]{[[Item.StuId]]}”，公式中“Target.text”为目标元件的现有文本，“Item.StuId”为中继器当前正在加载的某一项的学号列值（StuId）。
这一步操作完成之后，大家可以尝试预览，在元件“AllStuId”上会显示所有的已有学号（StuId）。
第五步，我们既然已经能够获取到所有的已有id，接下来我们只需要在添加按钮【鼠标单击时】，判断已有id不包含新增的id，满足这个条件，就可以进行添加数据的操作。
另外，我们还可以添加一些对输入内容的限制，例如姓名不能为空，成绩必须是数字。
条件设置中，“{[[id]]}”是通过局部变量“id”获取到了文本框元件“IdInput”中输入的新id文本，然后，在两侧添加花括号，与元件“AllStuId”中现有的内容进行对比。
第六步，当我们完成条件的设置，我们先不急于添加新数据的操作。
因为添加新数据时，会导致中继器列表刷新，也就是说，【每项加载时】中的交互还会再次执行。这样的话，元件“AllStuId”上的文本会变得很多。为了保持元件“AllStuId”上的id内容最新，我们先将这个元件的文本清空，待到下一步添加数据的操作时，通过【每项加载时】的交互，所有id数据会重新添加到这个元件中。
第七步，我们进行添加数据的交互设置，通过【添加行】的动作设置为中继器“List”添加文本框中新输入的各项数据。
上图中的“id”、“n”、“c”以及“m”都是局部变量，分别获取到文本框元件“IdInput”、“NameInput”、“ChineseInput”以及“MathInput”上的文本内容。
注意：此步骤中局部变量设置并未提供相关截图，不做设置直接输入（例如：“[[id]]”），起不到任何作用。
如果不了解局部变量操作，请先阅读AxureRP制作原型中变量的使用（1）和AxureRP制作原型中变量的使用（2）。
以上为添加按钮上设置的交互。
第八步，我们为删除按钮“Delete”添加交互。（此按钮设置名称，是为了方便部分同学理解该按钮所在的位置）
双击中继器，打开编辑区，点中删除按钮，先添加清空元件“AllStuId”文字的交互。
原因及相关设置参考第六步。
第九步，继续上一步，为删除按钮添加【删除行】的交互，删除中继器“List”中的当前行“This”。
也就是说，点击中继器项目列表中哪一项的删除按钮，就把这一个列表项对应的数据行删除。
以上为删除按钮“Delete”上设置的交互。
以上就是中继器限制重复添加数据的方法。
3、使用中继器实现添加标签的交互
先来看看最终要实现的效果。
上面这张图，不足以表达要实现的所有交互。
我来具体描述一下：
2、在添加标签时，白色的矩形输入框始终在最后的位置；
3、每个标签上都有删除按钮，点击时删除当前的标签。
接下来，我们来看详细的令人发指的实现步骤。
1、先放入一个中继器，做一下样式的设置，布局设置为【水平】，并且为每个标签之间设置列的【间距】。如果允许输入的标签很多的话，还可以通过【网格排布】来设置每排项的数量，让标签每到达一定数量折行显示。
2、双击中继器元件，进入中继器的内容编辑区。为中继器中自带的矩形设置样式，将填充颜色设置为黑色，文字颜色设置成白色；同时，设置元件的文字左对齐；并且为元件添加左侧文字与边界间的填充。
3、在编辑区中再放入一个文本标签元件，然后输入一个乘号（×），将文字的字号设置为28号字，字体颜色设置成白色，并将元件的文字进行水平与垂直方向的居中对齐。
4、上面的两步，我们完成了模板内容的制作。接下来，我们进行数据集的内容编辑。
首先，修改数据集的列名为“TagText”，这个名称建议和模板中黑色矩形的名称保持一致。
然后，因为标签列表默认情况下只有一个输入框，所以删除数据集中原有的数据，保留一个空行。
完成上面的操作之后，因为我们在模板中使用的矩形是中继器自带的，所以在交互设置中默认的交互依然有效。
并且，因为我们为矩形添加了名称以及为数据集编辑了列名，大家能够在默认的交互中看到这些名称。
5、我们进行点击删除按钮时删除标签的交互设置。这个设置很简单，只需要在删除按钮【鼠标单击时】添加【删除行】的动作设置，删除当前行。
具体动作设置如下图：
6、把编辑区中的内容全选，然后在内容上点击鼠标右键，选择【转换为动态面板】的选项。然后双击动态面板，为其命名为“TagPanel”，并且新增一个状态，将之前的状态名称修改为“Show”，新增的状态名称修改为“Input”。
为什么要进行这一步操作呢？因为在中继器中不但能够显示标签，还要能够输入标签，这是两部分不同的内容。
所以，我们通过动态面板的两个状态，分别存放显示标签和输入标签的元件内容。在之后的操作中，我们进一步实现只有中继器最后一个列表项显示状态“Input”，也就是输入标签的元件内容。
7、双击上图中的状态“Input”，打开这个状态的编辑区。
在这个状态中，我们放入一个矩形作为边框，注意这个矩形要与状态“Show”中的矩形尺寸保持一致。
然后，我们继续放入一个文本框元件，将其命名为“TagInput”，用于输入标签内容。
8、在上图中，大家能够看到，文本框还有自己的边框，这样影响美观。
所以，我们在元件的属性中勾选【隐藏边框】的选项。
这样设置之后，看上去就是一个矩形的输入框。
9、当我们输入标签，光标离开文本框的时候，要让中继器保存标签的内容，并且新增一项。
这里大家注意，在我们输入完标签之后，实际上是对当前列表项的内容进行了更新，并且添加了一个新的列表项。
在数据集中的表现就是，将标签内容保存到了当前行，并且添加了一个新行。
所以，我们为文本框添加【失去焦点时】【更新行】的动作，为中继器“TagList”更新当前行“Tagtext”列的列值。
这个列值的内容，我们需要获取到文本框中输入的内容。
我们点击“fx”按钮，进入编辑值的界面进行获取。
编辑值的界面打开之后，我们添加一个局部变量“tag”，把文本框“TagInput”的元件文字保存到这个局部变量中，并且添加到值的编辑区。
完成上面的操作之后，我们点击确定按钮，保存设置，并且回到添加动作的界面中。
10、继续在用例编辑的界面中添加【添加行】的动作，
添加的行对应的是中继器最后一项，这一项显示标签的输入框，无需显示标签内容。
所以，在添加行的动作中，新增行的列值内容我们可以任意输入，但不能为空。
11、如果需要限制标签的添加数量，在这一步我们也可以添加条件进行限制。
例如，只允许输入4个标签（实际为5个列表项，包含输入标签的列表项），我们就可以添加条件：【值】“[[Item.Repeater.itemCount]]”【<】【值】“5”。
“[[Item.Repeater.itemCount]]”能够获取当前项所在中继器的列表项数量。
完成上述的操作之后，文本框“TagInput”的交互设置如下：
12、当列表项为最后一项时，要显示标签输入框。
我们需要先判断列表项是否最后一项。
在中继器的交互中，我们为【每项加载时】的交互再添加一个用例，设置条件：【值】“[[Item.isLast]]”【==】【值】“true”。
“[[Item.isLast]]”能够获取真值（true）或者假值（false），如果当前加载的项是最后一项，则获取到真值，否则获取到假值。
当获取到真值的时候，我们就可以通过动作【设置动态面板状态】，将动态面板“TagPanel”的状态切换到“Input”，从而将输入框显示出来。
不过，大家要注意，当我们完成上面的操作之后，中继器加载时最后一项并没有切换到输入框。
这是因为，当我们添加新的用例时，软件会自动让新的用例和前一个用例形成条件的关联。
我们需要在新的用例上点击鼠标右键，在菜单中选择【切换为<If>或<Else If>】的选项，来取消这个关联。
通过以上的步骤，我们就完成了这个案例的制作。惊不惊喜？开不开心？
不过，这个案例还存在一些不足之处，例如：
2、输入标签的长度限制；
3、输入标签后按回车键添加标签；
4、标签达到数量后隐藏输入框。
这里我简单说一下这些不足的解决方案，大家可以自己去尝试解决：
TagInput”的用例上添加条件，判断该文本框的元件文字不等于空。
2、字符限制：在文本框“TagInput”的属性中设置【最大长度】。
3、输入后按回车键添加标签：在文本框“TagInput”的【按键按下时】添加条件判断，判断【按下的键】等于键值<Enter>，设置的动作与【失去焦点时】相同。或者，设置动作【触发事件】，目标元件选择文本框“TagInput”，事件列表中勾选【失去焦点时】，这种方法也能够实现。
4、标签达到数量后隐藏输入框：在中继器的每项加载时继续添加用例，判断如果是最后一项并且中继器列表项的数量等于5，添加动作【隐藏】动态面板“TagPanel”。
4、中继器信息获取与分页条的实现
首先提醒一下，这个很长，有些人可能会受不了！
先来看看要实现的内容。
这是一个学生成绩的表格。
我来介绍一下，需要做的内容：
2、表格中首列序号自动生成，且不受翻页影响；
3、表格加载时，顶部显示表格相关信息，包括可见项数量、加载项数量、当前页面以及页面总数；
4、点击分页条按钮能够翻到相应页面；
5、点击分页条按钮时，列表信息要跟随发生变化；
6、列表翻页时，对应的翻页按钮文字加粗显示。
接下来，我们就根据上面罗列的实现目标，逐一完成各项功能。
第一步，放入一个中继器，双击打开，先完成中继器的基本操作（纯属套路，此处简述，看图理解）。
1、创建模板
2、添加数据
3、添加交互
这一步需要特别说明一下。
【每项加载时】添加【设置文本】这个动作时，其他几项照常操作，序号这一项要将“StuIndex”的值设置为“[[(Item.Repeater.pageIndex-1)*12+Item.index]]”。
其中：Item.Repeater.pageIndex是当前项所在中继器的当前页码；item.index是当前项的序号，但是这个序号翻页后会依然从1开始；所以，我们通过页码减1乘以12（每页项目数量）再加上项的序号就能够计算出正确的序号。
4、设置样式
这一步也要注意，模板中的所有矩形都要取消填充颜色或者设置不透明为0%，否则，会遮挡中继器添加的背景颜色和交替背景色。
经过以上几步设置，我们现在能够看到这样的效果。
第二步，表格上面的X要变成相应的数值。
我们先给显示信息的元件命名为“ListInfo”
页面打开后，这些数值就要呈现出来，所以，在这个元件的【载入时】（在更多事件中）我们添加【设置文本】于“当前元件”的动作，然后点击fx按钮，进行值的设置。
在值的设置界面，我们先创建局部变量获取到【元件】“List”，然后通过系统变量调用它的各个属性，添加到信息文本中。
通过这一步，在预览时我们就能够看到列表信息了。
第三步，为分页条按钮添加翻页的交互。
翻页的交互很简单，都是通过【鼠标单击时】添加【设置当前显示页面】的动作来实现，区别在于上一页、下一页和尾页是在列表中选择，其它的是指定页码。
1、尾页
2、上一页
3、下一页
4、首页
5、各个翻页按钮
各个翻页按钮上的文字即是页码，所以可以通过[[This.text]]获取到当前被点击翻页按钮上的文字填入。这样设置完毕后，可以将交互复制给其他翻页按钮，无需再重复设置。
第四步，点击翻页按钮时，列表信息要跟随发生变化。
我们需要给分页条中每一个按钮【鼠标单击时】都继续添加一个，通过【触发事件】重新触发信息元件“ListInfo”的【载入时】事件。
这里以首页按钮为例。
添加完这个动作后，复制给其它翻页按钮，这样，在翻页的同时列表信息也会被重新加载。
第五步，列表翻页时，对应的翻页按钮文字加粗显示。
翻页按钮的文字样式发生变化，我们首先该想到的是需要设置【选中】时的交互样式。
并且，给这些翻页按钮添加相同的选项组名称，以保证只有一个按钮文字变粗。
提示：关于选项组效果，请到《Axure RP 8入门手册》的在线阅读的相关文章中了解。
这些带有页码的翻页按钮命名为“Tag01”~“Tag06”，为什么到6呢？
因为，我的中继器数据集中共有69条数据，每页12条，共6页。那为什么是69呢？
我就喜欢69，管得着么？
接下来，我们需要考虑的是什么时候选中。
很显然，每个带有页码的翻页按钮【鼠标单击时】，都应该【选中】当前这个按钮，从而文字变成选中时的粗体。
提示：当然也可以设置其他样式，只是对于我来说粗点就行了。
这一个动作也只需要给一个带有页码的翻页按钮设置，然后复制给其它按钮。
另外，还要给首页按钮【鼠标单击时】【选中】“Tag01”的动作；
并且，给尾页按钮添加【鼠标单击时】【选中】“Tag06”的动作。
最后，还有上一页和下一页按钮需要进行处理。
而且，页面刚刚打开时也需要选中一个带有页码的翻页按钮。
那么，我们就在每一个带有页码的翻页按钮【载入时】都添加一个交互。
首先，在条件设置中，我们可以通过局部变量“l”获取中继器“List”这个元件，然后通过“l.pageIndex”获取到当前列表显示页面的页码；如果这个页码【==】“当前元件”的【元件文字】，就执行【选中】“当前元件”的动作。
提示：局部变量“
l”的设置，参考第二步中类似的设置；选中当前元件的动作设置，参考上一步中类似的设置。
当为每一个带有页码的翻页按钮设置完载入时的交互之后，我们为上一步和下一步按钮添加交互，这个交互是【鼠标单击时】通过【触发事件】重新执行每一个带有页码翻页按钮的【载入时】交互。
以上一页按钮为例。
因为之前添加过【触发事件】这个动作，我们就在这个动作上继续编辑。
完成这一步后，点击上一页和下一页按钮时，就能根据中继器当前页面的页面选中对应的页码按钮。
以上，就是整个案例的实现过程，是不是长？但是能够弄出来很爽？
5、中继器实现某一行前后插入行的操作
我们知道中继器可以实现列表，对于平常所见到的表格可以非常容易的实现。
并且，还可以通过中继器的一些交互动作实现添加、删除、更新、筛选与排序的操作。
但是，没有插入行的操作。
偶尔会在某些群里看到有人提出这样的需求：我要插入啊！我要在中间那个地方插入啊！
好吧！
我教你怎么插入。
先看一下插入的效果。
提示：因为AxureRP8没有在右键触发交互时屏蔽浏览器菜单（Axure RP 7是可以的），所以需要点一下屏幕中菜单以外的位置，才能看到自己的菜单。
接下来，我们来实现这个交互效果。
这里涉及到一些功能，我先来做一下描述：
- 实现中继器列表每行包含显示状态和编辑状态；
- 实现选项菜单；
- 实现点击编辑按钮时，转为编辑状态；
- 实现点击保存按钮时，更新当前行数据；
- 实现点击删除按钮时，删除当前行数据；
- 实现中继器某一行中点击鼠标右键时，在鼠标指针所在位置显示菜单；
- 实现点击菜单中前面插入选项时，在行前插入新行并为编辑状态；
- 实现点击菜单中后面插入选项时，在行后插入新行并为编辑状态。
根据上方的描述，我们来分步实现每一个功能。
一、实现中继器列表每行包含显示状态和编辑状态。
1、放入中继器并命名为“List”，双击打开中继器，在中继器的编辑区放入5个矩形并命名；
2、将前面的4个矩形全选，点鼠标右键，选择转换为动态面板，命名为“RowPanel”；
3、双击动态面板将“State1”名称改为“Show”，点中这个状态后，点击“重复”；
4、将新出现的状态命名为“Edit”，并且将状态中的所有矩形的命名去除，再添加三个文本框到前3个矩形上，分别命名。
现在中继器中所有元件组成如下：
5、在属性中为中继器“List”添加一些数据。
提示：上图中能够看到，数据集中有一列名为“
IndexText”的数据，这是实现插入效果的关键，用途在后面说明。
6、在【每项加载时】为中继器添加基本交互，让列表能够显示中继器中的数据。
7、在页面编辑区中，添加4个矩形作为表头，此时，已经正常显示了列表内容。
二、实现选项菜单。
添加两个矩形，作为菜单选项，并转换为动态面板（也可以组合）；命名为“MenuPanel”后隐藏。
到这里所有的元件，准备完毕。
三、实现点击编辑按钮时，转为编辑状态。
编辑按钮添加【鼠标单击时】为“MenuPanel”【设置面板状态】为“Edit”，并且通过【获取焦点】的动作，将光标进入姓名输入框“NameInput”。
四、实现点击保存按钮时，更新当前行数据。
五、实现点击删除按钮时，删除当前行数据。
六、实现中继器某一行中点击鼠标右键时，在鼠标指针所在位置显示菜单。
为中继器中的动态面板“RowPanel”添加【鼠标右击时】的交互，设置动作为【移动】选项菜单“MenuPanle”【到达】鼠标指针所在的位置；并且，【显示】选项菜单“MenuPanle”。
不过，这里为了能够在当前行的前后进行插入，我们需要通过全局变量“Temp”记录一下当前行的编号，也就是前面提到的数据集中的“IndexText”。
七、实现点击菜单中前面插入选项时，在行前插入新行并为编辑状态。
提示：此处为前面插入的关键步骤。
我们思考一下：在某一行的前面插入一个新行，从编号的角度来说，当前行的编号和新插入行的编号应该是什么样的呢？
我想是这样：插入位置以及之后每一行的编号都要增加1，而新插入行的编号为插入位置的行编号。
所以，在这里，我们需要处理行的编号，将所有大于等于插入位置行编号的行，现有编号都增加1。
这个处理，通过按【条件】【更新行】动作来实现。
提示：还记得我们将插入位置的行编号存入到了“Temp”变量中吗？
然后，通过【添加行】添加一个编号为插入位置行编号的行。
最后，别忘了【隐藏】选项菜单“MenuPanel”。
八、实现点击菜单中后面插入选项时，在行后插入新行并为编辑状态。
提示：此处为后面插入的关键步骤。
后面插入和前面插入的过程差不多。
区别在于改变编号的逻辑。
后面插入时，插入位置自身编号不变，所以是将行编号大于插入位置编号的行进行编号增加1的操作。
然后，将变量中保存的编号也需要增加1，和新插入行的编号保持一致。
并且，插入的行的编号也是插入位置行编号增加1之后的编号，即变量中的新编号。
不过，到这里，大家会发现插入的行，还是在列表最下方出现。
九、添加排序
我们还需要对列表按编号升序排列，这个排序效果应该是中继器加载时就能够生效的。
十、设置插入的行为编辑状态
【添加行】动作会导致中继器列表刷新，所有行都变为正常显示状态。
如果想在插入行之后，新行为编辑状态，我们需要在中继器【每项加载时】，如果行编号是变量中保存的行编号（即新插入行的行编号），将动态面板“RowPanel”的状态设置为“Edit”。
这里要注意，因为是新增了一个用例，“Case2”会自动为“Else If”，需要在用例名称上点击鼠标右键，选择【转换为IF...】的选项进行转换。
十一、清空变量
当完成插入行的数据编辑，点击保存按钮时，中继器列表也会刷新，此时需要清空变量，以免因变量中存有编号，将对应的行转为编辑状态。
到这里，所有的交互全部设置完毕。
6、中继器中单行选中变色的实现方法
图例：
思路与实现步骤：
1、点击一行时整行变色，需要在元件属性中预先设置一行中所有矩形元件【选中】时的【交互样式】。
2、点击一行时整行变色，还要添加点击时的交互，选中这一行所有的元件；我们可以把一行元件全选，通过快捷键<Ctrl+G>组合，为组合添加【鼠标单击时】选中【当前元件】的交互。
3、多行表格，多次点击时，仅当前一行变色，需要为所有的行在属性中【设置选项组名称】；因为中继器是把一行元件重复成多行，所以只需要给步骤2中的组合设置选项组名称；进行着一步操作时，务必注意，在属性中有多个【设置选项组名称】，只需为组合进行设置，其他无需设置。
4、完成以上3步，会发现没有得到想要的效果，这时，还是多行能被选中。因为在中继器的属性中有一个【取消选项组效果】的选项，默认是选中的；将这个选项取消选中，就能够实现想要的效果了。
图解：
二、中继器实操案例讲解
1、AxureRP8实战手册-案例16（中继器：制作商品列表）
案例来源:百度外卖-菜单
案例效果：
- 商品列表：（图1-125）
案例描述：
包含商品图片、名称、推荐人数、销售数量、价格以及添加按钮的商品模块列表。
元件准备：
- 页面中：（图1-126）
- 中继器“GoodsList”中：
包含命名：
- 中继器（用于商品列表）：
GoodsList - 文本标签（显示商品名称）：
GoodsName - 文本标签（显示推荐人数）：
GoodsRecommend - 文本标签（显示商品销量）：
GoodsSales - 文本标签（显示商品价格）：
GoodsPrice - 图片（显示商品图片）：
GoodsImage
思路分析：
中继器可用来实现重复的项目列表。可以将自身数据集中的数据通过项目交互与编辑好的元件模板进行绑定；并且，可以调整列表的布局、间距等；
中继器的操作分为以下几步：
- 在中继器的编辑区中，拖入元件创建单个项目的模板；（操作步骤1）
- 添加列表的数据、图片到数据集中；（操作步骤2~3）
- 添加交互将数据集中的数据关联到相应的元件；（操作步骤4~8）
- 设置中继器的排列布局与间隔。（操作步骤9）
操作步骤：
1、参考元件准备中的图1-127拖入元件创建模板，并进行命名；
2、打开本案例素材中的Excel数据表格，复制里面的数据；接下来，回到Axure中，双击中继器“GoodsList”，在检视面板中打开数据集，点中数据集的首行首列，按下快捷键<Ctrl+V>,粘贴数据到数据集中；然后，对应模板中的元件名称为中继器数据集的每一列设置名称；(图1-128)
3、在“GoodsImage”列中，点击<鼠标右键>,在菜单中选择【导入图片】，对应每行数据将图片导入到数据集中；（图1-129）
4、在检视面板中，打开交互界面，在【每项加载时】事件中添加“用例1”,设置动作为【设置文本】“GoodsName”为【值】“[[Item.GoodsName]]”；
- 用例动作设置：（图1-130）
“[[Item.GoodsName]]”可以直接输入，也可以通过点击【fx】图标，在弹出的编辑界面中，点击【插入变量或函数…】，然后，在打开的列表中选取，插入到值的输入框中；
- 编辑文本设置：（图1-131）
5、继续上一步，【设置文本】“GoodsPrice”为【值】“￥[[Item.GoodsPrice]]”；（参考操作步骤4）
6、继续上一步，【设置文本】“GoodsRecommend”为【值】“[[Item. GoodsRecommend]]人推荐”；（参考操作步骤4）
7、继续上一步，【设置文本】“GoodsSales”为【值】“已售[[Item. GoodsSales]]份”；（参考操作步骤4）
- 用例动作设置：（图1-132）
8、继续上一步，【设置图片】“GoodsImage”为【值】“[[Item.GoodsImage]]”。
- 用例动作设置：（图1-133）
9、在检视面板中，打开样式界面，设置{布局}为【水平】布局，并勾选【网格排布】，设置{每行项目数}为“2”；然后，设置{间距}为{行}“15”{列}“30”。（图1-134）
补充说明：
从Excel中复制数据到数据集，最后一行会多出一个空行，删除即可。
2、案例17. 中继器：商品列表排序
案例来源:美丽说-宝贝搜索
案例效果：
- 默认：（图1-135）
- 价格从低到高：（图1-136）
- 价格从高到低：（图1-137）
案例描述：
鼠标移入“价格排序”按钮，显示选项列表。选项在鼠标进入时显示粉色文字，点击选项，商品列表进行相应的排序。
元件准备：
- 页面中：（图1-138）
- 动态面板“
SortPanel”中： （图1-139）
- 中继器“
GoodsList”中：（图1-140）
- 中继器“
GoodsList”的数据集中：（图1-141）
包含命名：
- 中继器（用于商品列表）：
GoodsList - 动态面板（用于排序选项）：
SortPanel - 图片（显示商品图片）：
GoodsImage - 图片（显示商品类型）：
GoodsTypeImage - 文本标签（显示商品名称）：
GoodsName - 文本标签（显示商品销量）：
GoodsSales - 文本标签（显示商品价格）：
GoodsPrice
思路分析：
- 完成中继器数据集与元件的关联；（操作步骤1）
- 并设定好模块的排布与间隔；（操作步骤2）
- 鼠标移入“价格排序”按钮，需要显示排序的选项，并能够在鼠标移出选项时自动隐藏选项；（操作步骤3）
- 为每个排序选项添加鼠标移入时的样式；（操作步骤4）
- 点击每个排序选项时，需要中继器进行相应的排序，并隐藏排序的选项列表。（操作步骤5~6）
操作步骤：
1、为中继器的【每项加载时】事件添加“用例1”，设置商品的名称、价格、销量、图片和类型图标与模板中的元件关联；（参考图1-132）
- 事件交互设置：（图1-142）
2、在中继器的样式中设置{布局}为【水平】布局，【网格排布】中设置【每排项目数】为“4”；（参考图1-134）
3、为“价格排序”按钮的【鼠标移入时】事件添加“用例1”，设置动作为【显示】动态面板“SortPanel”，在设置的{更多选项}中选择【弹出效果】；设置为“弹出效果”后，显示出来的动态面板就会在鼠标移出时自动隐藏，而无需再添加交互；
- 用例动作设置：（图1-143）
4、在元件属性中为排序选项元件设置【鼠标悬停】的交互样式，文字颜色为粉红色；
5、双击动态面板“SortPanel”打开动态面板状态管理界面；再双击状态名称“State1”打开状态内容编辑区；在编辑区中为排序选项“价格从低到高”的【鼠标单击时】事件添加“用例1”，设置动作为【添加排序】到中继器“GoodsList”，排序{名称}为“SortPrice”，排序的{属性}为商品价格“GoodsPrice”，{排序类型}为数字类型“Number”，排序{顺序}选择【升序】排列；
- 用例动作设置：（图1-144）
6、继续上一步添加动作【隐藏】动态面板“SortPanel”；
- 用例动作设置：（图1-145）
7、参考操作步骤5~6，为排序选项“价格从高到低”的设置交互，不同之处只是排序交互中{顺序}为【降序】排列。
- 事件交互设置：（图1-146）
补充说明：
本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置。
3、案例19. 中继器：商品类型筛选
案例来源:美丽说-宝贝搜索
案例效果：
- 筛选前：（图1-156）
- 筛选后：（图1-157）
案例描述：
选中一个筛选条件后，将满足该条件的商品筛选出来。并且，多个筛选类型可以叠加。
元件准备：
- 页面中：（图1-158）
包含命名：
- 见案例16与案例17。
思路分析：
- 如果需要实现按类型的筛选，就需要在中继器的数据集中存储不同类型的数据；根据案例效果，每一种类型都应该在数据集中有对应的一列类型数据，记录每个商品是否此种类型；在这里我们仅以前两种类型（“11新款狂欢节”与“秋冬新款”）为例，省略其它类似操作。（操作步骤1）
- 在每一种类型的复选框被选中时，都要添加该种类型的筛选；（操作步骤2）
- 同理，在每一种类型的复选框取消选中时，也要相应的取消筛选；（操作步骤3）
- 做好一个复选框的交互后，其它复选框也要相应的进行设置。（操作步骤4）
操作步骤：
1、先在数据集中添加2列数据，列名分别是“Promotion”与“NewStyle”，表示促销与新款的数据列；具有属性的商品列值为“True”，不具有属性的商品列值为“False”；（图1-159）
2、根据案例17，我们知道底层的复选框会被进行选中状态的切换；那么，我们在“11新款狂欢节”底层复选框的【选中时】事件中添加“用例1”，设置动作【添加筛选】到中继器“GoodsList”；配置中不勾选【移除其它筛选】的选项,确保能够多条件筛选；筛选{名称}为“FilterPromotion”；筛选{条件}为“[[Item. Promotion==’True’]]”；
- 用例动作设置：（图1-160）
3、继续上一步，在该元件底层复选框的【取消选中时】事件中添加“用例1”，设置动作为【移除筛选】中继器“GoodsList”，{被移除的筛选名称}中填写上一步的筛选名称“FilterPromotion”；
- 用例动作设置：（图1-161）
4、参考操作步骤2~3，为“秋冬新款”的底层复选框添加交互，不同的是筛选名称为“FilterNewStyle”，筛选条件为“[[Item. NewStyle==’True’]]”。
- 事件交互设置：（图1-162）
补充说明：
- 这个案例中，商品 “双11活动”的优先级最高，当同时具备“双11活动”与“秋冬新款”属性时，优先显示“双11活动”的图标，所以筛选后的效果图中不完全是“秋冬新款”的图标。
- 注意本案例条件表达式中“
True”要用英文半角的单引号括起来（数字无需这样处理）； - 本案例中与网站实际内容略有不同；网站中第5列商品为推广商品，与商品列表并非统一列表；本案例中，为了排列美观，将商品列表调整为5列。
4、AxureRP8实战手册-案例20（中继器：选择对比商品①）
案例来源:京东-商品列表页
案例效果：
- 添加商品前：（图1-163）
- 添加商品后：（图1-164）
案例描述：
点击某个商品的“对比”按钮时，页面下方向上滑出对比栏，选中的商品将在对比栏中出现。点击对比栏“隐藏”按钮时，关闭对比栏。
元件准备：
- 页面中：（图1-165）
- 动态面板“
ContrastPanel”中：（图1-166）
- 中继器“
ContrastList”中：（图1-167）
- 中继器“
ContrastList”中的数据集：（图1-168）
- 动态面板“
ItemPanel”中：（图1-169）
- 中继器“
GoodsList”中：（图1-170）
- 中继器“
GoodsList”的数据集：（图1-171）
包含命名：
- 中继器（用于商品列表）：
GoodsList - 中继器（用于对比列表）：
ContrastList - 图片（用于商品列表的商品图片）：
GoodsImage - 图片（用于商品列表的促销图标）：
PromotionImage - 文本标签（用于商品列表的商品价格）：
GoodsPrice - 文本标签（用于商品列表的商品名称）：
GoodsName - 文本标签（用于商品列表的商品简介）：
GoodsSynopsis - 文本标签（用于商品列表的评论数量）：
CommentNumber - 图片（“对比”按钮的复选框图标）：
CheckImage - 动态面板（用于对比栏的位置固定以及显示/隐藏）：
ContrastPanel - 动态面板（用于对比列表悬停显示“删除”按钮效果）：
ItemPanel - 文本标签（用于显示对比商品名称）：
ContrastName - 文本标签（用于显示对比商品价格）：
ContrastPrice - 文本标签（用于对比列表删除按钮）：
DeleteButton - 图片（用于对比商品图片）：
ContrastImage
思路分析：
中继器可以动态的添加数据。本案例中对比列表的信息可以动态添加，就可以通过中继器来实现。
- 本案例中的中继器“
GoodsList”，并非所有的商品都显示促销图标“PromotionImage”；我们可以在中继器数据集中添加“IsPromotion”列，并预先设置好列值；中继器载入每一行数据时，根据 “IsPromotion”列的值是 “True”还是“False”，决定其是否显示。（操作步骤2~3） - 点击“对比”按钮时，要让复选框切换样式（操作步骤4）；
- 点击“对比”按钮时，要让对比列表从底部向上滑出；（操作步骤5）
- “对比”按钮的复选框选中时，要向对比列表添加一条商品信息；（操作步骤6）
- 点击对比栏中的“隐藏”按钮时，关闭对比栏。（操作步骤7）
操作步骤：
1、参考案例16以及本案例元件准备，完成中继器“GoodsList”与“ContrastList”的设置以及【每项加载时】事件的交互；
- 事件交互设置：（图1-172）
2、设置图片“PromotionImage”默认为显示的状态；然后，在元件属性中，设置该元件的【禁用】时的交互样式为{不透明(%)}“0”,这样禁用该元件时，该元件则完全透明不可见；（图1-173）
3、在中继器【每项加载时】事件中，添加“用例2”；设置判断条件，判断【值】“[[Item. IsPromotion]]”【==】【值】“False”时，执行动作【禁用】图片“PromotionImage”；最后，在该用例上点击<鼠标右键>，选择【切换为<If>或<Else If>】,将用例的判断转换为“If”格式。
- 条件判断设置：（图1-174）
- 用例动作设置：（图1-175）
- 事件交互设置：（图1-176）
4、在元件属性中为图片“CheckImage”添加【选中】的交互样式，导入被选中样式的图片；然后，为该元件所在的动态面板【鼠标单击时】事件添加“用例1”，设置动作为【切换选中状态】“CheckImage”；
- 交互样式设置：（图1-177）
- 用例动作设置：（图1-178）
5、继续上一步，添加第2个动作为【显示】动态面板“ContrastPanel”，{动画}为【向上滑动】，持续{时间}“500”毫秒；
- 用例动作设置：（图1-179）
6、为图片“CheckImage”的【选中时】事件添加“用例1”，设置动作为【添加行】到中继器“ContrastList”；配置中点击【添加行】的按钮，再打开的界面中添加一行数据，对应列名分别填入“[[Item.GoodsName]]”、“[[Item.GoodsPrice]]”和“[[Item.GoodsImage]]”；这样就将当前被选中的商品的信息读取出来，添加到了中继器“ContrastList”的数据集中，并通过【每项加载时】的交互动态的显示到对比栏中；
- 用例动作设置：（图1-180）
7、为对比栏的“隐藏”按钮的【鼠标单击时】事件添加“用例1”，设置动作为【隐藏】动态面板“ContrastPanel”。
- 用例动作设置：（图1-181）
补充说明：
- 本案例不对重复添加以及添加数量进行限制，此类功能将在之后的案例中进行讲解；
- 本案例未包含效果图片中左侧的推荐内容。
5、AxureRP8实战手册-案例21（中继器：选择对比商品②）
案例来源:京东-商品列表页
案例效果：
见案例20。
案例描述：
在上个案例的基础上（见案例20），添加对重复添加对比商品的限制。
元件准备：
- 在案例20的基础上新增内容：（图1-182）
包含命名：
- 见案例20
思路分析：
中继器在每项数据加载时，可以通过对列值进行判断对元件进行控制；所以，如果想限制“对比”按钮被点击时，不会重复添加数据，我们可以单独在中继器数据集中添加一列，用于记录选中的状态（见元件准备）；然后，通过对这个状态值的判断，进行不同的交互：
- 如果状态值为“
True”，说明商品已添加，该项数据加载时，要对复选框图片进行选中的操作；（操作步骤1） - 如果状态值为“
False”，说明商品未添加，可以进行添加对比商品信息的操作；（操作步骤3） - 每个商品的选中状态值，初始时为“
False”，成功添加对比商品信息时，要将状态值更新为“True”。（操作步骤4）
操作步骤：
1、在中继器“GoodsList”的【每项加载时】事件中，添加“用例3”；为用例添加条件判断【值】“[[Item.IsSelected]]”【==】【值】“True”；设置符合条件时的动作为【选中】图片“CheckImage”；最后，在该用例上点击<鼠标右键>，选择【切换为<If>或<Else If>】,将用例的判断转换为“If”格式；
- 条件判断设置：（图1-183）
- 用例动作设置：（图1-184）
- 事件交互设置：（图1-185）
2、因为，在上一步中，添加了中继器【每项加载时】对图片“CheckImage”的选中交互；“案例20”中“操作步骤4”所设置的动作就不再需要，将其删除；
- 事件交互设置：（图1-186）
3、为“对比”按钮所在动态面板（见上图）的【鼠标单击时】事件添加“用例2”，设置条件判断【值】“IsSelected”【==】【值】“False”；完成条件判断设置后确定保存，退出用例编辑界面；将“案例20”中“操作步骤6”所设置的动作，从图片“CheckImage”的交互中复制到“用例2”中，并删除图片“CheckImage”的交互；最后，在该用例上点击<鼠标右键>，选择【切换为<If>或<Else If>】,将用例的判断转换为“If”格式；
- 条件判断设置：（图1-187）
- 事件交互设置：（图1-188）
4、继续上一步，在“用例2”中添加第2个动作，【更新行】到中继器“GoodsList”；配置中选择【This】，表示更新当前行；然后，在【选择列】列表中选择“IsSelected”，为其设置新值“True”。
- 用例动作设置：（图1-189）
- 事件交互设置：（图1-190）
补充说明：
本案例交互流程为：点击“对比”按钮时，会对状态值进行判断；如果状态值为“False”，表示按钮未被选中，这时，将商品信息添加到对比栏，并更新当前商品的“IsSelected”列值为“True”；中继器数据集的数据被更新时会让中继器重新加载数据，从而触发【每项加载时】事件，那么，我们写在事件里的“用例3”就会发生作用，通过判断改变图片“CheckImage”的样式。
6、AxureRP8实战手册-案例22（中继器：选择对比商品③）
案例来源:京东-商品列表页
案例效果：
- 取消/删除时：（图1-191）
- 清空对比时：（图1-192）
案例描述：取消选中或点击对比栏中的“删除”按钮都可以删除对比栏中的商品信息；点击“清空对比栏”按钮，可以删除对比栏中所有的商品信息。
元件准备：见案例20与案例21。
包含命名：见案例20。
思路分析：
- 在案例21中，我们设置了中继器“
GoodsList”【每项加载时】事件的“用例3”，如果状态值是“True”就选中图片“CheckImage”；在当前的案例中，我们需要做删除对比信息的效果；而删除对比信息时，要对应取消选中图片“CheckImage”；（操作步骤1） - 点击“清空对比栏”需要删除全部商品信息；同时，需要取消商品列表中“对比”按钮复选框的选中状态；（操作步骤2~3）
- 点击“删除”按钮，可以删除当前的商品信息；同时，需要取消商品列表中对应的“对比”按钮复选框的选中状态；（操作步骤5~6）
- 点击“对比”按钮时，如果复选框是选中的状态，则取消复选框的选中状态；同时，删除对比栏中对应当前的商品信息。（操作步骤7~8）
操作步骤：
在案例21的基础上继续进行操作：
1、为中继器“GoodsList”【每项加载时】事件添加“用例4”，软件会自动设置条件为“Else If”，与“用例3”形成关联；在“用例4”中直接添加，不符合“用例3”条件时的动作为【取消选中】图片“CheckImage”；
- 事件交互设置：（图1-193）
2、为“清空对比栏”按钮的【鼠标单击时】事件添加“用例1”，设置动作为【删除行】中继器“ContrastList”，删除目标选择【条件】，{条件}中填写“True”；“True”表示该中继器数据集中每一个数据行都符合删除条件；
- 用例动作设置：（图1-194）
3、继续上一步，为“用例1”添加第2个动作，【更新行】到中继器“GoodsList”；更新目标选择“条件”；{条件}中填写“[[Item.IsSelected=='True']]”；点击【选择列】，选择“IsSelected”，为其设置新值“False”；
- 用例动作设置：（图1-195）
- 事件交互设置：（图1-196）
4、“对比”商品信息中的删除按钮“DeleteButton”默认为白色，在元件属性中设置【鼠标悬停】的交互样式，设置字体颜色为蓝色；在动态面板“ItemPanel”的元件属性中勾选【允许触发鼠标交互】，这样鼠标只要进入动态面板范围内，就会触发“DeleteButton”的【鼠标悬停】交互样式，呈现蓝色可见状态。（图1-197）
5、为对比商品信息中删除按钮“DeleteButton”（图1-197）的【鼠标单击时】事件添加“用例1”，设置动作为【更新行】到中继器“GoodsList”；更新目标选择“条件”；{条件}中填写“[[TargetItem.GoodsName==Item.ContrastName]]”；点击【选择列】，选择“IsSelected”，为其设置新值“False”；“TargetItem”表示目标中继器的数据行，该条件表示要更新目标中继器中“GoodsName”列值与当前数据行“ContrastName”列值相同的数据行；
- 用例动作设置：（图1-198）
6、继续上一步，为“用例1”添加第2个动作，【删除行】中继器“ContrastList”，删除目标选择【This】，表示删除当前项所对应的数据行；
- 用例动作设置：（图1-199）
- 事件交互设置：（图1-200）
7、为“对比”按钮的动态面板，添加“用例3”；这时，软件会自动关联“用例2”，设置条件为“Else If”，即不满足“用例2”的条件的情形；添加动作【更新行】到中继器“GoodsList”；更新目标选择【This】；点击【选择列】，选择“IsSelected”，为其设置新值“False”；
- 用例动作设置：（图1-201）
8、继续上一步，设置动作为【删除行】中继器“ContrastList”，删除目标选择【条件】，{条件}填写“[[TargetItem.ContrastName==Item.GoodsName]]”；这个条件表示删除目标中继器中“ContrastName”列值与当前数据行 “GoodsName” 列值相同的数据行。
- 用例动作设置：（图1-202）
- 事件交互设置：（图1-203）
补充说明：
本案例中未对商品列表其它交互进行设置，比如鼠标进入商品信息区域显示带阴影的背景矩形；该效果大家可以参考本案例中元件“DeleteButton”鼠标悬停效果的实现思路。
