Axure中动态表格序号自增-中继器应用

遇到一个项目，里面需要实现表格自动添加，点击删除，删除行的功能；如下：初始进入查看，有两条数据，点击，红框内的 + 号，自动增加一条数据，点击数据中的 ，可以删除对应行；

 

 

增加或删除操作时，NO列，需要要求可自行增加或减少； 

在这里，中继器就是最优选择；

STEP1：首先建立一个表头；可直接用文本输入框实现，或者直接放一个单行的表格实现均可；

STEP2：拖入一个中继器；

 

中继器拖入后，默认为三行；双击进入中继器，将输入框复制为多个，因为我的表头是10个字段+一个增加按钮，所以一共是11个；

分别给中继器中的每个格命个名，不然在后面做用例的时候，待选中会没有格子可供设置；名字我就是给的11，22,33一直到1010；

 

 

 

这次项目中，需要体现输入框，所以单独做了一层动态面板，按照表格大小，做了一套对应的输入框；这里是Axure中设置的样子，生成之后网页的样子看文章里第一个图；

STEP3，现在按照项目要求，先给几行设定好的值来显示；这个直接选中中继器，右侧属性-中继器表格中，进行设置；

由于中继器中的格子11,22,33,----1010，需要给对应的值，所以，这里在右侧属性的中继器表格中，需要给列命名，用来做格子内容的对应；

 

到现在位置，表格的样子设置好了，表格的列设置好了，命名做好了，中继器中列命名做好了，中继器中列表显示的内容设置好了，现在开始添加用例；

STEP4：首先，用例需要实现的功能包括：中继器表中的内容显示对应，单行删除，逐行增加，逐行增加时NO列数字自增；

第一个：中继器表中显示内容对应；

中继器表设置好后，每个格子都是空的，显示内容，在中继器属性中做了设置；现在要把它们对应起来；

选中中继器，添加用例（只有中继器的用例，有‘每项加载时’这个用例；）

这里有一个特殊的地方，因为NO11列是要实现格子11中显示数字自增的效果，所以这里11格子设置的时候，【设置文本】这里的下拉选择‘值’，设置为取index的值；操作如下，点击‘fx’，弹出框中，插入变量或函数这里，下拉选择index，则生成[[Item.index]]，

 

其他格子展示的内容，则操作步骤如下几个图；在编辑文本弹出框中，输入：[[Item.name22]]，意思就是22这个格子取值的时候，去中继器属性表的name22列取值；

 

 

 

 

 

 

 

 

按照这个步骤，把所有的格子的对应内容都设置完；最终用例如下：

截止到这里，中继器显示的部分就设置完了；每个格子内显示那些内容设置完毕；

第二个：单行删除

单行删除，效果直接坐在中继器里面，最后一个格子上里额图标上的；这里有绿色，是因为我没有直接坐在图标上，而是加了热区；

 

增加的用例是，鼠标单击这个区域图标时，则删除这行数据；

 

 

第三个：逐行增加

逐行添加的效果用例添加，需要做在表头的 + 号图标上；

 

这里要实现的是，每点击一次 + 号，中继器中表格增加一行，且NO列数字逐行增加；

a：中继器自带的添加行动作，添加行，选中中继器对象，默认add为0，需要将add后的数据增添为1，则点击【添加行】按钮，弹出的“添加行到中继器弹窗”中，设置内容，首先先增加一行，这里实际上如果对不实现数字自增功能，就已经设置完成了；

现在继续设置数据自增加，这里就需要设置： fx函数来实现了；

 

 

NO列，点击fx，弹出的变量设置页面中，

点击fx后，弹出的编辑值弹窗中，首先局部变量中，添加一个局部变量，LVAR1，是系统默认给的一个局部变量名称，选择“”“元件”，对象选择自己的这个中继器，这里的意思是，这变量是这个名叫‘信息栏1’的中继器元件的；

然后输入变量和函数中，选择这个变量；

 

添加之后，内容如下：

，这个时候，需要设置一下：我是自己手动输入的； [[LVAR1.itemCount+1]]，itemCount，这个是计算中继器行的总数，因为我们是要新增一行，所以是itemCount+1，

这里可以理解为，名字是信息栏1这个中继器，他的局部变量LVAR1,计算他行的数量，并且+1，当添加行的时候，这里就显示这个数值；

 

逐级确定后，则动态增加行，且NO列序号数字自动增加也设置完成；

所有的设置做完后，就完成了一个表格的动态添加，点+号，增加一行，点图标 -- 号，删除对应行，且序号自动增加；

 

中继器的应用真的是很多，我也只是在项目过程中进行学习；

之前看到一种自增加的方式，当时的确是生效了，也记录了，但是这次再看，始终不明白是什么意思，并且也再也实现不了了，所以这次学习了这种方式；设置原理也是明白的；所以修改之后，重新放了上来；

之前的方式，是这种：中继器中   [[Item.列名]]  的用途：获取数据行中指定列的值。是不是可以理解为列的个数，NO列取值为个数，所以达到了序号增加的目的；这个后续还会继续尝试，如果确切的理解了之后，也会更新上来；

这次用到的是itemCount的方式；这个目前亲测有效哈；

PS：这个方法涉及到了变量的问题，这里重新总结了一种，应该更容易一些。具体可查看https://i.cnblogs.com/posts/edit-done;postId=15976093；