中繼器(Repeater)是Axure RP7中新增的一款高級組件，傳說是Axure中最復(fù)雜的組件。在需要以列表形式（如商品列表、聯(lián)系人列表等）展示信息并對列表進行增刪改查，分頁、排序等操作的場景中，中繼器是你的不二選擇。本文用一個實例來演示中繼器的具體用法。

完成后的效果如下圖（1），rp文件下載地址請看文末鏈接，該實例可以實現(xiàn)以下功能：

• 新增一條記錄到列表
• 高亮顯示選中記錄并刪除當前選中記錄，且每次只能選中一條記錄
• 行編輯
• 根據(jù)查詢條件進行查詢
• 分頁

圖（1）

為了達到更好的學(xué)習(xí)效果，強烈建議您邊讀邊做，另外，在使用Axure的過程中，一定要養(yǎng)成給組件命名的好習(xí)慣，這會大大提高你的工作效率。廢話不多說，下面我以Axure RP8為例，來說明該實例的實現(xiàn)步驟。

一、設(shè)置表頭及中繼器數(shù)據(jù)集

首先，拖一個table組件到工作區(qū)來作為表頭，完成表頭設(shè)置后，再拖入一個中繼器，我將其命名為repeater，如下圖（2）所示：

圖（2）

接下來，需要在中繼器組件的屬性中設(shè)置中繼器的數(shù)據(jù)集，可以把這些數(shù)據(jù)理解為中繼器的原始數(shù)據(jù)，如下圖（3）：

圖（3）

然后，需要設(shè)置中繼器的項（目），所謂“項”就是被中繼器所重復(fù)的布局。雙擊repeater，進入中繼器的項進行編輯，我們會先看到一個矩形，這個矩形是中繼器默認項，可以直接刪除，也可以當做一個普通矩形來用，我們將項設(shè)置為4個矩形，并分別命名為：item_id，item_name，item_sex，item_op。
在未設(shè)置任何交互的情況下，中繼器不會自動填充數(shù)據(jù)集。雙擊中繼器“OnItemLoad”事件，分別為item_id，item_name，item_sex設(shè)置value，注意，我將item_id的value設(shè)置成了item.index，如下圖（4）：

圖（4）

此時再次預(yù)覽發(fā)現(xiàn)中繼器可以正常顯示填充的數(shù)據(jù)集。

二、新增一條記錄

使用label、text field、droplist、button組件設(shè)計出新增界面，兩個輸入框分別命名為add_name，add_sex，新增按鈕命名為add_btn，如下圖（5）：

圖（5）

雙擊add_btn 的onclick事件，添加交互事件，步驟如下圖（6），圖（6）中打開的彈出框?qū)γ總€字段進行設(shè)置，用到了變量，關(guān)于變量不再詳細說明，不清楚的可自行查找相關(guān)資料，圖（7）顯示了對于name字段的設(shè)置方法，其他字段類似：

圖（6）

圖（7）

此時再次預(yù)覽就可以使用新增功能啦。

三、刪除一條記錄

這個功能分兩步實現(xiàn)：第一步實現(xiàn)單擊某行，對該行進行標記并高亮顯示，第二步單擊刪除按鈕刪除已標記行，所以刪除功能要用到中繼器的標記/取消標記功能。

雙擊中繼器，選中4個矩形將他們分為一組，命名為column_group，設(shè)置column_group的選中時（selected）樣式，這樣設(shè)置后被選中行將高亮顯示，如下圖（8）：

圖（8）

然后，設(shè)置column_group的onclick事件，需要設(shè)置3個事件，如下如（9）所示，在這里要特別注意unmark事件的設(shè)置，如果沒有unmark事件，你會發(fā)現(xiàn)在后續(xù)刪除時，會刪除所有點擊過的記錄，而不只是當前記錄，此外，事件是按順序執(zhí)行的，一定要把unmark事件放在mark后，切記！

圖（9）

此時預(yù)覽，單擊各個記錄，凡是點擊過的都會高亮顯示，而我們想要的效果是只高亮顯示當前選中行。此時需要用到Axure中選項組（selection group）概念，同一個選項組中的組件，當其中一個組件被選中時，自動取消其他組件的選中狀態(tài)。我們?yōu)閏olumn_group設(shè)置選項組，選項組的名稱為selection_group，同時取消勾選repeater組件的 “isolate selection groups”，如下圖（10）:

圖（10）

此時再次預(yù)覽，就可以實現(xiàn)只高亮顯示當前行的效果。至此，我們完成了第一步，第二步非常簡單：只需要添加刪除按鈕，命名為del_btn并設(shè)置其onclick事件，如下圖（11）：

圖（11）

完成上述步驟后，再次預(yù)覽是不是發(fā)現(xiàn)已經(jīng)實現(xiàn)刪除功能啦~

四、行編輯

這一步我們要實現(xiàn)修改并保存當前選中行的效果。首先，我們雙擊中繼器，在item_op矩形中添加一個Link Button組件，命名為mod_btn，設(shè)置其文字為“修改”；此外我們還要在item_name，item_sex矩形中各新增一個Text Field組件，分別命名為mod_name，mod_sex；在item_op中新增一個Link Button組件，命名為save_btn，設(shè)置其文字為“保存”，保證save_btn與mod_btn位置相同（重疊）；設(shè)置mod_name，mod_sex，save_btn均為隱藏狀態(tài)。

接下來我們就需要設(shè)置mod_btn的onclick事件。單擊mod_btn應(yīng)實現(xiàn)顯示mod_name、mod_sex、save_btn，隱藏mod_btn，并設(shè)置mod_name、mod_sex的值，如下圖（12）所示：

圖（12）

然后，我們設(shè)置save_btn的onclick事件，單擊save_btn應(yīng)將mod_name、mod_sex的值保存下來，隱藏mod_name、mod_sex、save_btn，顯示mod_btn，并update row，如下圖（13）：

圖（13）

預(yù)覽即可單擊修改按鈕來查看效果如圖（14）所示：

圖（14）

五、條件查詢

添加兩個查詢框和一個查詢按鈕，分別命名為search_name，search_sex、search_btn。為search_btn添加onclick事件，此時需要用到中繼器的add filter來進行數(shù)據(jù)過濾，如下圖（15）：

圖（15）

在配置查詢條件時，由于我們采用模糊查詢，我這邊用的是indexOf函數(shù)，對于姓名查詢條件而言，只要數(shù)據(jù)集item.name中包含了search_name的輸入值，就是滿足該姓名查詢條件的記錄，姓名查詢條件的設(shè)置圖下圖（16），性別查詢條件的設(shè)置類似，但要注意性別是下拉框：

圖（16）

再次預(yù)覽，即可使用查詢按鈕對數(shù)據(jù)集進行過濾。

六、分頁

中繼器的分頁功能非常好用，只需要進行簡單的設(shè)置即可。首先，我們設(shè)置repeater的分頁屬性，如下圖（17），我設(shè)置中繼器每頁顯示3條記錄：

圖（17）

然后，在repeater下方添加4個Label，分別設(shè)置其文字為“首頁”、“上一頁”，“下一頁”，“尾頁”，并分別添加onclick事件，下圖（18）展示了“下一頁”的onclick事件，其他3個Label事件類似：

圖（18）

恭喜！你已經(jīng)完成使用Axure中最復(fù)雜組件——Repeater實現(xiàn)增刪改查、分頁的功能啦，能堅持看到這里的都是熱愛學(xué)習(xí)的寶寶，如果有任何疑問，歡迎交流~

rp文件地址：http://pan.baidu.com/s/1c1K8z6K

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