Axure技巧-移动行插入行的实现方法

本文适合对中继器中的数据集与元件间的映射逻辑、更新行和添加排序有简单了解的读者。

 

前言

    

    在项目中因为有移动行和插入行的需求，为了更直观、具体的体现该效果，便想在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/