在Axure中用“中继器”实现对表格的增、删、改

最近一周探索了Axure中中继器的用法，在看别人的教程的过程中我产生了很多的困惑，于是理了一些思路出来，制作出了对列表的增加行（行里有数据）和删除行，进行对行的修改和保存。希望对学习中继器的朋友有用。

中继器的用法总结如下：

一、给表格添加一行数据

1.1 准备工作

从元件库分别拖入输入框（文本框、下拉列表框）、按钮、表格。设计出页面的三个区域：输入区、动作区、显示区。对每个元件命好名。

★思路： 从输入区输入信息，经过动作区的点击动作后把信息呈现在显示区。

 

 

1.2 设置中继器

拖入中继器

 

选择中继器，①将中继器拖到与表格标题左对齐；②在中继器的属性栏把默认的三行删除。

 

③在中继器属性栏中输入表格的标题名称（用英文，软件不识别中文）。

 

在设计稿中双击中继器，切换到对中继器的内部编辑。

 

 

设置中继器宽度与表格宽度一致。高度可以高一点或矮一点都可以。

 

 

从元件区拖入6个文本框，每个文本框的宽度与所在列的宽度一致。对应的命好名。

 

 

1.3 给“添加”按钮配置动作

★思路  ：当点击“添加”按钮时，中继器增加一行。

 

选择“添加”按钮-在属性栏下找点击“鼠标单击时”-在弹出的弹窗里（中继器-数据集-添加行）-点击“添加行”后-在第三栏里找到并勾选要添加行的中继器-点击下方的“添加行”按钮-弹出一个“添加行到中继器”的弹框。

  

在“添加行到中继器”的弹框中，从“xingming”栏起，到“youxiang”栏，分别点击“fx”,在弹出的“编辑器”中，在第一个输入框里命个名比如：[[xming]]，在第二个输入框中也输入相同的名称，只是去掉双中括号。然后选择“元件文字”（如果后面的数据是下拉选择的，则在这里要选择“被选项”），在最后一个输入框中选择输入区的某个文本框（数据的输入位置）。

 

？思考  ：按理来说，配置到这一步的时候就可以完成增加行的动作了，因为我们在这里已经配置了数据的来源地和数据的显示位置。但是用浏览器测试结果为：行可以增加，但是数据为空，见下图：

 

进一步分析以上的配置是把输入区的数据经过点击“添加”按钮后显示在表格显示区，但是之前还做了一个步骤就是：在中继器中拖入了6个文本框，而以上的配置并没有涉及到这六个文本框，那么显示的数据会不会被这六个文本框遮住了呢？

 

那么在axure中把这六个文本框删除掉后是不是就可以把数据显示出来了呢？

 

删除了这六个文本框后，在浏览器中测试结果如下（依然无法显示数据）：

 

为什么会出现这样的结果？这应该是Axure软件的一个设计缺陷，也就是说中继器不具有显示能力。显示数据要通过中继器中的文本框来显示。

领悟 ：到此，明白了那六个文本框是用来给表格分栏并显示中继器从输入区获取的数据。

1.4 给中继器配置显示能力

★思路：  当点击“添加”按钮时，中继器增加一行的同时将输入区的数据显示在新增的行中。

 

第1.3步中，已经把输入区的数据获取到了中继器中，但是无法显示出来。在这一步中将通过一些方法将数据显示到中继器中的六个文本框中。

 

选择中继器-选择每项加载时-选择设置文本-分别选择中继器中的文本框-点击fx-选择对应的中继器标题名称。

值得注意的是：为了实现编号一栏实现自增长，在编辑文本弹框里，编号一栏选择index。局部变量可以不用设置。操作栏先别设置。

 

 

可以看到，当设置完后，原来在中继器属性中输入的数据已经获取到了中继器中。

 

测试成功：在浏览器中测试结果如下：

 

 

二、给表格删除一行

★思路：  勾选某行后点击删除按钮，此行被删除。

2.1 新增复选框

为了达到这个目的，首先在中继器中加入复选框，并在中继器属性标题栏中新增一栏“xuanze”用来放置复选框。

 

 

2.2 设置复选框与所在行的对应关系

★思路：  勾选复选框时标记复选框所在的行。

 

选择复选框-双击选中时-在弹出的用例编辑器中选择（中继器-数据集-标记行）-选择对应的中继器-选择：This。

 

 

2.3 设置删除按钮的点击动作

★思路：  点击“删除”按钮时，将被标记的行删除掉。

 

选择删除按钮-选择鼠标单击时-在弹出的用例编辑器中选择（删除行-选择对应的中继器-勾选已标记）。

 

测试成功：在浏览器中测试结果如下：

 

 

三、修改行

★思路：  通过一个“修改”按钮让此行处于可编辑状态，编辑完后通过一个“保存”按钮将此行信息保存。

3.1 准备工作

首先让文本框处于禁用状态。在中继器中新增一个“修改”按钮和一个“保存”按钮，让“保存”按钮先

处于隐藏状态。

    

3.2 为“修改”按钮配置动作

★思路：  点击“修改”按钮时，本行处于可编辑状态，同时“保存”按钮出现，隐藏“修改”按钮。

 

选择修改按钮-双击鼠标单击时-在弹出的用例编辑器中（选择元件-显示/隐藏-显示保存按钮/隐藏修改按钮）（选择元件-启用/禁用-启用相应的文本框）

  

测试成功：在浏览器中测试结果如下：

 

 

3.3 为“保存”按钮配置动作

★思路：  点击“保存”按钮后，保存当前行的数据。

 

选择保存按钮-选择鼠标单击时-在弹出的用例编辑器中（选择中继器-数据集-更新行-选择相应的中继器-选择This-选择中继器中相应的列-点击相应列后的fx-在弹出的编辑值弹框中设置值得来源地（比如xingming的来源地在这里设置为从中继器的xm文本框中获取））

 

测试成功：在浏览器中测试结果如下：

 

 

至此，在中继器中对表格的增、删、改完成，不足之处望大家指正，欢迎讨论，需要源文件的可以私信我索要。

感谢阅读！