編輯導讀：本文作者從自身工作經(jīng)驗出發(fā)，介紹中繼器中Item與TargetItem的區(qū)別，以及如何實現(xiàn)移動行插入行的效果。本文適合對中繼器中的數(shù)據(jù)集與元件間的映射邏輯、更新行和添加排序有簡單了解的讀者。

一、前言

在項目中因為有移動行和插入行的需求，為了更直觀、具體的體現(xiàn)該效果，便想在Axure中實現(xiàn)出來。

在網(wǎng)上搜索相關(guān)資料與教程，發(fā)現(xiàn)涉及到TargetItem對象，但沒有理解其應用原因及原理，在深入了解了TargetItem對象后，最終實現(xiàn)了效果。現(xiàn)把自己理解的總結(jié)出來，供大家參考。

二、效果

在上方插入：可在任意一行，點擊相應圖標后，在該行的上方插入一行。

在下方插入：可在任意一行，點擊相應圖標后，在該行的下方插入一行。

上移：可在任意一行（除第一行），點擊相應圖標后，將該行的上移一行。

下移：可在任意一行（除最后一行），點擊相應圖標后，將該行的下移一行。

三、思路

不難發(fā)現(xiàn)，四種效果本質(zhì)上都是“改變位置順序”。

如果我們把所有行的位置順序按12345…的“順序號”依次排下去。那么以“在下方插入”為例，如：在1下方插入一行，可以簡單的分為三個步驟：

四、實現(xiàn)

按照以上思路，我們在數(shù)據(jù)集中增加一列“OrderNum”來存儲“順序號”。

可能這里有童鞋會問，為什么不直接用index? 因為index只能遞增，不能對其進行排序。

第一步更新行

首先找到1下面的23456……

這就引出TargetItem的作用。從名稱上也能大概理解為“目標項”。沒有“Target”前綴的Item，我們知道是指“當前項”，如第一行的順序號Item.OrderNum=1。而應用了條件時，TargetItem可以表示所有符合條件的項。所以23456……就是符合“在1下面”這個條件的TargetItem.OrderNum。

而“在1下面”這個條件要如何表達呢？我們發(fā)現(xiàn)1下面的23456…都是大于1的，所以條件可以這么寫:[[TargetItem.OrderNum>Item.OrderNum]]。

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

也就是Axure會把每一項根據(jù)條件來判斷，符合條件，就執(zhí)行下方結(jié)果，不符合的就不動。

第二步添加行

新增的一行順序號為2，即當前行的順序號+1，也就是[[Item.OrderNum+1]]。

第三步添加排序

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

剩下的三個效果在上方插入行、上移和下移，大體類似，這里就不贅述了，在附件中附上源文件供大家參考。大家可以看看能不能按照以上思路把剩下的這三個效果實現(xiàn)。

五、最后

在效果實現(xiàn)的過程中難免會有一些問題，例如點擊沒效果，沒有按照預期的效果發(fā)展等，對此在不斷的調(diào)試和修改過程中，我總結(jié)了兩點：

實現(xiàn)過程中，變化數(shù)據(jù)可直接觀測。如例子中的OrderNum,雖然在最后界面呈現(xiàn)上不會出現(xiàn)，但是在繪制過程中，我們可以把它顯示在界面上，實時觀察做的對不對，最后再把它去掉即可。

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

如例子中要把23456…都+1，要先寫出[[TargetItem.OrderNum>Item.OrderNum]]的條件，再寫出[[TargetItem.OrderNum+1]]的結(jié)果，這個過程我們就可以把結(jié)果簡單用某個數(shù)字代替，以此來先看看條件寫得對不對。

基本效果出來后，可以再進行樣式等方面的優(yōu)化，比如該例子我還畫了個“豪華”版在附件中。

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

本文由 @阿喊設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議