跳到主要内容

用中继器_调整表格排序

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

这里表格是通过中继器控制的,中继器內有两列数据,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 保持同步,从而获得连续且不重复的排序值:

以上便是本文的全部内容,感谢阅读!