完成後的效果如下圖（1），該例項可以實現以下功能：

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

圖（1）

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

一、設定表頭及中繼器資料集

首先，拖一個table元件到工作區來作為表頭，完成表頭設定後，再拖入一箇中繼器，我將其命名為repeater，如下圖（2）所示：

圖（2）

接下來，需要在中繼器元件的屬性中設定中繼器的資料集，可以把這些資料理解為中繼器的原始資料，如下圖（3）：

圖（3）

然後，需要設定中繼器的項（目），所謂“項”就是被中繼器所重複的佈局。雙擊repeater，進入中繼器的項進行編輯，我們會先看到一個矩形，這個矩形是中繼器預設項，可以直接刪除，也可以當做一個普通矩形來用，我們將項設定為4個矩形，並分別命名為：item_id，item_name，item_sex，item_op。
在未設定任何互動的情況下，中繼器不會自動填充資料集。雙擊中繼器“OnItemLoad”事件，分別為item_id，item_name，item_sex設定value，注意，我將item_id的value設定成了item.index，如下圖（4）：

圖（4）

此時再次預覽發現中繼器可以正常顯示填充的資料集。

二、新增一條記錄

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

圖（5）

雙擊add_btn 的onclick事件，新增互動事件，步驟如下圖（6），圖（6）中開啟的彈出框對每個欄位進行設定，用到了變數，關於變數不再詳細說明，不清楚的可自行查詢相關資料，圖（7）顯示了對於name欄位的設定方法，其他欄位類似：

圖（6）

圖（7）

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

三、刪除一條記錄

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

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

圖（8）

然後，設定column_group的onclick事件，需要設定3個事件，如下如（9）所示，在這裡要特別注意unmark事件的設定，如果沒有unmark事件，你會發現在後續刪除時，會刪除所有點選過的記錄，而不只是當前記錄，此外，事件是按順序執行的，一定要把unmark事件放在mark後，切記！

圖（9）

此時預覽，單擊各個記錄，凡是點選過的都會高亮顯示，而我們想要的效果是隻高亮顯示當前選中行。此時需要用到Axure中選項組（selection group）概念，同一個選項組中的元件，當其中一個元件被選中時，自動取消其他元件的選中狀態。我們為column_group設定選項組，選項組的名稱為selection_group，同時取消勾選repeater元件的 “isolate selection groups”，如下圖（10）:

圖（10）

此時再次預覽，就可以實現只高亮顯示當前行的效果。至此，我們完成了第一步，第二步非常簡單：只需要新增刪除按鈕，命名為del_btn並設定其onclick事件，如下圖（11）：

圖（11）

完成上述步驟後，再次預覽是不是發現已經實現刪除功能啦~

四、行編輯

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

接下來我們就需要設定mod_btn的onclick事件。單擊mod_btn應實現顯示mod_name、mod_sex、save_btn，隱藏mod_btn，並設定mod_name、mod_sex的值，如下圖（12）所示：

圖（12）

然後，我們設定save_btn的onclick事件，單擊save_btn應將mod_name、mod_sex的值儲存下來，隱藏mod_name、mod_sex、save_btn，顯示mod_btn，並update row，如下圖（13）：

圖（13）

預覽即可單擊修改按鈕來檢視效果如圖（14）所示：

圖（14）

五、條件查詢

新增兩個查詢框和一個查詢按鈕，分別命名為search_name，search_sex、search_btn。為search_btn新增onclick事件，此時需要用到中繼器的add filter來進行資料過濾，如下圖（15）：

圖（15）

在配置查詢條件時，由於我們採用模糊查詢，我這邊用的是indexOf函式，對於姓名查詢條件而言，只要資料集item.name中包含了search_name的輸入值，就是滿足該姓名查詢條件的記錄，姓名查詢條件的設定圖下圖（16），性別查詢條件的設定類似，但要注意性別是下拉框：

圖（16）

再次預覽，即可使用查詢按鈕對資料集進行過濾。

六、分頁

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

圖（17）

然後，在repeater下方新增4個Label，分別設定其文字為“首頁”、“上一頁”，“下一頁”，“尾頁”，並分別新增onclick事件，下圖（18）展示了“下一頁”的onclick事件，其他3個Label事件類似：

圖（18）

恭喜！你已經完成使用Axure中最複雜元件——Repeater實現增刪改查、分頁的功能啦