axure利用中繼器對表格的增刪改操作

中繼器在網(wǎng)上很多的解釋就是重復(fù)添加，取自repeater的中文釋義。在作者看來，中繼器可以是產(chǎn)品經(jīng)理的一個不完全小型數(shù)據(jù)庫。因為中繼器具有行和列的結(jié)構(gòu)，可以存儲數(shù)據(jù)矩陣，且可以在頁面上進行增、刪、改、查、排序的功能，不需要寫sql語句就有操作數(shù)據(jù)庫的快感。說它是不完全數(shù)據(jù)庫是因為添加的數(shù)據(jù)并不是真的存儲在服務(wù)器，關(guān)掉Axure的預(yù)覽頁面，之前添加的所有數(shù)據(jù)就會隨風而散了。本文為大家介紹中繼器對表格的增刪改操作。

1 開工前的原件準備工作

文本框矩形框數(shù)個、下拉框一個、按鈕兩個、中繼器一個。建議做好原件命名，因為之后會涉及到蠻多的交互，清晰的命名可以避免出現(xiàn)混亂。

然后我們需要對中繼器做一些處理，點擊中繼器，右側(cè)它的屬性頁，可以把三個行都刪除，然后雙擊中繼器進入中繼器編輯頁面。

按照表格每一列的名稱在中繼器內(nèi)放入6個矩形框，做好元件命名。

2 數(shù)據(jù)添加功能

準備工作完成，然后我們需要為中繼器添加一下動作，中繼器屬性面板選擇每項載入時，當打開網(wǎng)頁或者添加數(shù)據(jù)時候，為中繼器加載數(shù)據(jù)集到元件。

特別注意的是，為了實現(xiàn)編號自增，編號的動作設(shè)置為［［item.index］］

中繼器屬性面板為中繼器數(shù)據(jù)集添加列，也可以手動添加一行數(shù)據(jù)，如果是7.0的版本你的中繼器數(shù)據(jù)集應(yīng)該再頁面下方，8.0整合到右側(cè)

之后需要為添加按鈕配置點擊動作，為中繼器“添加行”

點擊下方的 添加行 ，把輸入框和中繼器數(shù)據(jù)集綁定起來：

到此，添加功能已經(jīng)完成。

3 單行選擇+刪除行

進入中繼器頁面，選中6個矩形框，設(shè)置選中的動作—填充顏色

同樣是選中6個矩形框的狀態(tài)，按 ctrl+g，將6個矩形設(shè)為選項組，別忘了添加一個選項組名稱（很重要），添加鼠標點擊動作，

標記行是稍后的刪除動作需要用到的，現(xiàn)在已經(jīng)可以選擇行，但是沒有單選效果，回到中繼器屬性

中間的勾去掉即可。

下面為“刪除行”按鈕配置動作

此處非常簡單，只需要為中繼器刪除行選擇已標記即可，我們上一步標記行的意義就在于此。

4 修改行

點擊修改按鈕，改行變?yōu)榭删庉嫚顟B(tài)，同時修改按鈕變成保存按鈕，點擊保存之后保存修改后的數(shù)據(jù)。

中繼器修改框拖入兩個文本矩形，一個修改（xiugai）一個保存（baocun），默認保存文本為隱藏狀態(tài)。

Xingming、xingbie、zhiwei、youxiang四個矩形框分別拖入一個文本輸入框，命名為”xiugai-xingming、xiugai-xingbie、xiugai-zhiwei、xiugai-youxiang“去掉邊框設(shè)為隱藏狀態(tài)。

然后為修改按鈕配置動作：

點擊修改按鈕，顯示隱藏文本輸入框，同時文本輸入框獲取當前行的值。

然后為保存按鈕配置動作，點擊保存時中繼器更新行，同時中繼器數(shù)據(jù)集應(yīng)該設(shè)置為剛剛的隱藏文本框，這里與之前添加按鈕的配置基本一樣