巧用 Axure 中继器 index 调整表格排序

以下是本文要实现的效果，点击“添加”按钮可以往表格内添加一行，点击“删除”按钮可删除当前行，点击箭头可交换上下两行的排序，上箭头与上一行交换排序，下箭头与下一行交换排序。

这里表格是通过中继器控制的，中继器內有两列数据，order_num 用来排序，name 用来保存姓名：

在中继器载入时，按排序值 order_num 进行排序：

要在中继器中交换两列的数据，可以想到的最快速方法，就是交换它们的排序值，以下是点击向下箭头的交互：

通过将目标行的下一行排序值-1，目标行排序值+1来实现交换排序值的目的，举个例子，比如要交换“张三”和“李四”的位置，只需要将“李四”的排序值改为“1”（目标行的下一行-1），“张三”的排序值改为“2”（目标行+1），再按 order_num 进行排序就可以交换位置。

向上箭头则是将交互反过来，目标行的上一行+1，目标行-1：

接下来进行“添加”的交互设置，为了确保数值是连续且不重复的，每次添加时，需要先统计当前的数据条数，并加上1赋值给排序值：

删除很简单，就是在交互中配置删除当前行即可，但是删除功能做完后，问题就来了，删除后会导致排序值不连续，再次进行排序时，排序值就乱掉了，会出现排序值重复的情况，排序也会出问题：

因此，这种做法是不保险的，但我们可以观察到，我们需要排序值是连续且不重复的，这正好是 Axure 中继器中 index 的特性，我们可以在每次数据发生变化时，把 index 赋值给 order_num 来实现排序效果。

接下来对上面的设计做一些调整，首先将排序值 order_num 清空：

接下来在项目载入时的事件中，添加交互，获取每一行的 index 并赋值给 order_num：

然后在添加和删除的按钮交互中，添加触发中继器载入事件的交互：

这样在添加和删除时，中继器会重新运行一次载入事件，重新获取 index 对 order_num 进行赋值，这样无论是添加还是删除，order_num 始终与 index 保持同步，从而获得连续且不重复的排序值：

以上便是本文的全部内容，感谢阅读！