完成后的效果如下圖（1），該實(shí)例可以實(shí)現(xiàn)以下功能：

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

圖（1）

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

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

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

圖（2）

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

圖（3）

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

圖（4）

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

二、新增一條記錄

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

圖（5）

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

圖（6）

圖（7）

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

三、刪除一條記錄

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

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

圖（8）

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

圖（9）

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

圖（10）

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

圖（11）

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

四、行編輯

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

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

圖（12）

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

圖（13）

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

圖（14）

五、條件查詢

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

圖（15）

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

圖（16）

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

六、分頁(yè)

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

圖（17）

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

圖（18）

恭喜！你已經(jīng)完成使用Axure中最復(fù)雜組件——Repeater實(shí)現(xiàn)增刪改查、分頁(yè)的功能啦

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。