完成后的效果如下圖（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實現增刪改查、分頁的功能啦

總結

以上是生活随笔為你收集整理的Axure原型设计相关：Axure RP8中继器实例（附rp文件）——列表的增删改查、分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。