Axure技巧：移動行插入行的實現方法
編輯導讀：本文作者從自身工作經驗出發，介紹中繼器中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協議