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