提示1：本篇教程不適合新手，以及未掌握中繼器、動態(tài)面板、全局變量、局部變量、系統(tǒng)變量等使用的…新手。
提示2：本篇教程中，動作設置的具體細節(jié)，請參考文末源文件。
我們知道中繼器可以實現(xiàn)列表，對于平常所見到的表格可以非常容易的實現(xiàn)。
并且，還可以通過中繼器的一些交互動作實現(xiàn)添加、刪除、更新、篩選與排序的操作。
但是，沒有插入行的操作。
偶爾會在某些群里看到有人提出這樣的需求：我要插入！我要在中間那個地方插入！
好吧！
我教你怎么插入。
先看一下插入的效果。
提示：因為AxureRP8沒有在右鍵觸發(fā)交互時屏蔽瀏覽器菜單（Axure RP 7是可以的），所以需要點一下屏幕中菜單以外的位置，才能看到自己的菜單。
接下來，我們來實現(xiàn)這個交互效果。
這里涉及到一些功能，我先來做一下描述：
- 實現(xiàn)中繼器列表每行包含顯示狀態(tài)和編輯狀態(tài)；
- 實現(xiàn)選項菜單；
- 實現(xiàn)點擊編輯按鈕時，轉(zhuǎn)為編輯狀態(tài)；
- 實現(xiàn)點擊保存按鈕時，更新當前行數(shù)據(jù)；
- 實現(xiàn)點擊刪除按鈕時，刪除當前行數(shù)據(jù)；
- 實現(xiàn)中繼器某一行中點擊鼠標右鍵時，在鼠標指針所在位置顯示菜單；
- 實現(xiàn)點擊菜單中前面插入選項時，在行前插入新行并為編輯狀態(tài)；
- 實現(xiàn)點擊菜單中后面插入選項時，在行后插入新行并為編輯狀態(tài)。
根據(jù)上方的描述，我們來分步實現(xiàn)每一個功能。
一、實現(xiàn)中繼器列表每行包含顯示狀態(tài)和編輯狀態(tài)。
1、放入中繼器并命名為“List”，雙擊打開中繼器，在中繼器的編輯區(qū)放入5個矩形并命名；
2、將前面的4個矩形全選，點鼠標右鍵，選擇轉(zhuǎn)換為動態(tài)面板，命名為“RowPanel”；
3、雙擊動態(tài)面板將“State1”名稱改為“Show”，點中這個狀態(tài)后，點擊“重復”；
4、將新出現(xiàn)的狀態(tài)命名為“Edit”，并且將狀態(tài)中的所有矩形的命名去除，再添加三個文本框到前3個矩形上，分別命名。
現(xiàn)在中繼器中所有元件組成如下：
5、在屬性中為中繼器“List”添加一些數(shù)據(jù)。
提示：上圖中能夠看到，數(shù)據(jù)集中有一列名為“IndexText”的數(shù)據(jù)，這是實現(xiàn)插入效果的關(guān)鍵，用途在后面說明。
6、在【每項加載時】為中繼器添加基本交互，讓列表能夠顯示中繼器中的數(shù)據(jù)。
7、在頁面編輯區(qū)中，添加4個矩形作為表頭，此時，已經(jīng)正常顯示了列表內(nèi)容。
二、實現(xiàn)選項菜單。
添加兩個矩形，作為菜單選項，并轉(zhuǎn)換為動態(tài)面板（也可以組合）；命名為“MenuPanel”后隱藏。
到這里所有的元件，準備完畢。
三、實現(xiàn)點擊編輯按鈕時，轉(zhuǎn)為編輯狀態(tài)。
編輯按鈕添加【鼠標單擊時】為“MenuPanel”【設置面板狀態(tài)】為“Edit”，并且通過【獲取焦點】的動作，將光標進入姓名輸入框“NameInput”。
四、實現(xiàn)點擊保存按鈕時，更新當前行數(shù)據(jù)。
五、實現(xiàn)點擊刪除按鈕時，刪除當前行數(shù)據(jù)。
六、實現(xiàn)中繼器某一行中點擊鼠標右鍵時，在鼠標指針所在位置顯示菜單。
為中繼器中的動態(tài)面板“RowPanel”添加【鼠標右擊時】的交互，設置動作為【移動】選項菜單“MenuPanle”【到達】鼠標指針所在的位置；并且，【顯示】選項菜單“MenuPanle”。
不過，這里為了能夠在當前行的前后進行插入，我們需要通過全局變量“Temp”記錄一下當前行的編號，也就是前面提到的數(shù)據(jù)集中的“IndexText”。
七、實現(xiàn)點擊菜單中前面插入選項時，在行前插入新行并為編輯狀態(tài)。
提示：此處為前面插入的關(guān)鍵步驟。
我們思考一下：在某一行的前面插入一個新行，從編號的角度來說，當前行的編號和新插入行的編號應該是什么樣的呢？
我想是這樣：插入位置以及之后每一行的編號都要增加1，而新插入行的編號為插入位置的行編號。
所以，在這里，我們需要處理行的編號，將所有大于等于插入位置行編號的行，現(xiàn)有編號都增加1。
這個處理，通過按【條件】【更新行】動作來實現(xiàn)。
提示：還記得我們將插入位置的行編號存入到了“Temp”變量中嗎？
然后，通過【添加行】添加一個編號為插入位置行編號的行。
最后，別忘了【隱藏】選項菜單“MenuPanel”。
八、實現(xiàn)點擊菜單中后面插入選項時，在行后插入新行并為編輯狀態(tài)。
提示：此處為后面插入的關(guān)鍵步驟。
后面插入和前面插入的過程差不多。
區(qū)別在于改變編號的邏輯。
后面插入時，插入位置自身編號不變，所以是將行編號大于插入位置編號的行進行編號增加1的操作。
然后，將變量中保存的編號也需要增加1，和新插入行的編號保持一致。
并且，插入的行的編號也是插入位置行編號增加1之后的編號，即變量中的新編號。
不過，到這里，大家會發(fā)現(xiàn)插入的行，還是在列表最下方出現(xiàn)。
九、添加排序
我們還需要對列表按編號升序排列，這個排序效果應該是中繼器加載時就能夠生效的。
十、設置插入的行為編輯狀態(tài)
【添加行】動作會導致中繼器列表刷新，所有行都變?yōu)檎ｏ@示狀態(tài)。
如果想在插入行之后，新行為編輯狀態(tài)，我們需要在中繼器【每項加載時】，如果行編號是變量中保存的行編號（即新插入行的行編號），將動態(tài)面板“RowPanel”的狀態(tài)設置為“Edit”。
這里要注意，因為是新增了一個用例，“Case2”會自動為“Else If”，需要在用例名稱上點擊鼠標右鍵，選擇【轉(zhuǎn)換為IF…】的選項進行轉(zhuǎn)換。
十一、清空變量
當完成插入行的數(shù)據(jù)編輯，點擊保存按鈕時，中繼器列表也會刷新，此時需要清空變量，以免因變量中存有編號，將對應的行轉(zhuǎn)為編輯狀態(tài)。
到這里，所有的交互全部設置完畢。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。