Axure-repeater实现Item的复制、删除、上下移、最前最后

引言

  Axure RP 在7.0之后推出了一个新功能Repeater（中继器），相信大家如果接触过ASP.NET的话，肯定对这个控件不陌生，在ASP.NET中同样也有Repeater控件用来显示重复的项目列表。Axure和ASP.NET的Repeater原理基本上是一致的，有了ASP.NET的Repeater的基础，理解Axure中的Repeater不是什么难事。

实现

  我们通过一个实例来依次说明如何进行复制、删除、上下移、最前最后。

1. 添加一个Repeater元件，命名为repTest
   
   
   

2. 设置内部部件，依次命名

   
   

3. 为repTest设置数据集

   
   

4. 初始化中继器

   
   

5. repTest显示数据集的数据

   
   

复制

  我们希望通过单击“复制”按钮，在本条数据项下面添加一条相同的数据项。

  复制数据项表现在Repeater中是添加一行，但是问题是，如果仅仅是添加行，新添加的行会出现在整个Repeater的最下方，显然这不是我们想要的效果，我们需要在本行下面添加。

  思考之后我决定使用Repeater的排序功能，通过对数据集中每一行的id按数值大小排序来确定行的前后顺序。

1. 为“复制”按钮的“单击”事件添加用例

   
   

2. 添加行，为想要添加的行选择数据，和需要复制的行数据一致

   
   

3. 添加排序，按照id的数值大小进行升序排序

   
   

4. 预览效果，单击“复制”按钮

   
   

删除

  删除行实现起来就很容易了，添加Repeater的删除行动作即可。

上移、下移

  实现思路和复制是一致的，都是通过修改id值，然后进行排序，从而达到想要的效果。

  只要把当前选中行的id值与上一行或者下一行互换，再进行排序就可以。以上移为例。

• 借助一个全局变量tempData来保存当前选中行的id值

• 更新上一行的id数值，使其加1

• 更新当前行的id数值，使其减1

• 添加排序，重新按照升序排列

最前、最后

  同样的，我们可以上面的方法来实现最前或者最后。让比当前选中行的id值小的所有行的id都加1，将当前行id更新为1，最后排序。这样，选中行就成为了第一行，而原先在选中行上方的数据行都会依次下移。

小结

  以上的上下移以及最前最后并没有完全实现，不知道什么原因，在点击四次以后，就卡住不动了。

  也不知道是否可以调试，没办法确定哪一步出现了问题。还有Axure中Repeater无法嵌套，在涉及到一些更复杂原型时不知如何下手。