编辑导读：本文作者从自身工作经验出发，介绍中继器中Item与TargetItem的区别，以及如何实现移动行插入行的效果。本文适合对中继器中的数据集与元件间的映射逻辑、更新行和添加排序有简单了解的读者。

一、前言

在项目中因为有移动行和插入行的需求，为了更直观、具体的体现该效果，便想在Axure中实现出来。

在网上搜索相关资料与教程，发现涉及到TargetItem对象，但没有理解其应用原因及原理，在深入了解了TargetItem对象后，最终实现了效果。现把自己理解的总结出来，供大家参考。

二、效果

在上方插入：可在任意一行，点击相应图标后，在该行的上方插入一行。

在下方插入：可在任意一行，点击相应图标后，在该行的下方插入一行。

上移：可在任意一行（除第一行），点击相应图标后，将该行的上移一行。

下移：可在任意一行（除最后一行），点击相应图标后，将该行的下移一行。

三、思路

不难发现，四种效果本质上都是“改变位置顺序”。

如果我们把所有行的位置顺序按12345…的“顺序号”依次排下去。那么以“在下方插入”为例，如：在1下方插入一行，可以简单的分为三个步骤：

四、实现

按照以上思路，我们在数据集中增加一列“OrderNum”来存储“顺序号”。

可能这里有童鞋会问，为什么不直接用index? 因为index只能递增，不能对其进行排序。

第一步更新行

首先找到1下面的23456……

这就引出TargetItem的作用。从名称上也能大概理解为“目标项”。没有“Target”前缀的Item，我们知道是指“当前项”，如第一行的顺序号Item.OrderNum=1。而应用了条件时，TargetItem可以表示所有符合条件的项。所以23456……就是符合“在1下面”这个条件的TargetItem.OrderNum。

而“在1下面”这个条件要如何表达呢？我们发现1下面的23456…都是大于1的，所以条件可以这么写:[[TargetItem.OrderNum>Item.OrderNum]]。

然后，把23456……都+1，即[[TargetItem.OrderNum+1]]。

也就是Axure会把每一项根据条件来判断，符合条件，就执行下方结果，不符合的就不动。

第二步添加行

新增的一行顺序号为2，即当前行的顺序号+1，也就是[[Item.OrderNum+1]]。

第三步添加排序

“在下方插入”效果就大功告成。

剩下的三个效果在上方插入行、上移和下移，大体类似，这里就不赘述了，在附件中附上源文件供大家参考。大家可以看看能不能按照以上思路把剩下的这三个效果实现。

五、最后

在效果实现的过程中难免会有一些问题，例如点击没效果，没有按照预期的效果发展等，对此在不断的调试和修改过程中，我总结了两点：

实现过程中，变化数据可直接观测。如例子中的OrderNum,虽然在最后界面呈现上不会出现，但是在绘制过程中，我们可以把它显示在界面上，实时观察做的对不对，最后再把它去掉即可。

一步一步来，不要一蹴而就。

如例子中要把23456…都+1，要先写出[[TargetItem.OrderNum>Item.OrderNum]]的条件，再写出[[TargetItem.OrderNum+1]]的结果，这个过程我们就可以把结果简单用某个数字代替，以此来先看看条件写得对不对。

基本效果出来后，可以再进行样式等方面的优化，比如该例子我还画了个“豪华”版在附件中。

参考文章：https://www.axure.com.cn/76497/

本文由 @阿喊设计 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash，基于CC0协议