起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure RP8中繼器實(shí)例（附rp文件）——列表的增刪改查、分頁(yè)
中繼器(Repeater)是Axure RP7中新增的一款高級(jí)組件，傳說(shuō)是Axure中最復(fù)雜的組件。在需要以列表形式（如商品列表、聯(lián)系人列表等）展示信息并對(duì)列表進(jìn)行增刪改查，分頁(yè)、排序等操作的場(chǎng)景中，中繼器是你的不二選擇。本文用一個(gè)實(shí)例來(lái)演示中繼器的具體用法。
完成后的效果如下圖（1），rp文件下載地址請(qǐng)看文末鏈接，該實(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ān)持看到這里的都是熱愛(ài)學(xué)習(xí)的寶寶，如果有任何疑問(wèn)，歡迎交流~
rp文件地址：http://pan.baidu.com/s/1c1K8z6K
本文由 @辣椒圈 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
過(guò)濾不出任何數(shù)據(jù)呢？
謝謝勤快的作者專業(yè)分享，寫的非常好，跟著走一邊就學(xué)會(huì)了！
請(qǐng)問(wèn)如何保證分頁(yè)后序號(hào)是遞增的呢？而不是又是從1開始的呢？另外我如果想顯示總頁(yè)數(shù)以及當(dāng)前所處的頁(yè)數(shù)位置如何顯示呢？
弱弱的問(wèn)一下~我添加的編碼要怎么設(shè)置才能自動(dòng)生成
全部看懂了，謝謝啦，就是可不可以顯示頁(yè)碼，并且頁(yè)碼跟隨每頁(yè)變化
上一頁(yè) 下一頁(yè)為什么都不好使，點(diǎn)擊沒(méi)反應(yīng)？
請(qǐng)問(wèn)在配置模糊查詢條件時(shí)，[[Item.name.indexOf(eagle_filter_name)>-1]]中“>-1”的作用是什么？
字符的索引是從0開始算的，如果設(shè)置“>0”,而你查找的字符剛好是字符串的第一位，就會(huì)匹配不到哦~
請(qǐng)問(wèn)設(shè)置column_group的onclick事件時(shí)，Set is selected of This equal to “true”的作用是什么？
是使onclick的widget成為selected狀態(tài)，而非mousedown狀態(tài)。
一個(gè)簡(jiǎn)單的中繼器增刪查改被你整的這么復(fù)雜，也是醉醉的了，還都是英文。。。。
也就刪的部分用了復(fù)雜的方式，整體而言還是不錯(cuò)的。
大神你好，問(wèn)個(gè)問(wèn)題，在新增的時(shí)候，ID自動(dòng)+1，是怎么做出來(lái)的？求助啦，謝謝！
沒(méi)看到那邊把數(shù)據(jù)關(guān)聯(lián)的時(shí)候，把ID改為[item.index]了？
花了三小時(shí)，磕磕巴巴弄完了。。。然后。。。全忘了。。。哈哈哈
性別在修改時(shí)，可否采用下拉框的方式
可以
可以，用Set Selected List Option這個(gè)action就行了。
以下個(gè)人意見，并希望大大們解決下我的問(wèn)題 ?? ：
1、刪除。在操作里面加刪除操作，Onclick的case里面刪除行，配置動(dòng)作里面選中中繼器，下方選擇This。我覺(jué)得這樣可以減少用戶操作的繁瑣。
2、點(diǎn)擊修改時(shí)候，性別字段用下拉框展示會(huì)不會(huì)更好，否則這一類型的字段不是可以隨意保存，但是我想問(wèn)下是否可以設(shè)置點(diǎn)擊修改時(shí)候，將原本數(shù)據(jù)帶入下拉列表展示，我沒(méi)搞出來(lái)，求大神指導(dǎo)。
3、修改完保存，我按照之前Onclick的case update數(shù)據(jù)，但是沒(méi)有保存下來(lái)，case里面配置動(dòng)作希望大神指導(dǎo)（value怎么選擇），而且我性別修改時(shí)設(shè)置的是下拉列表，是否可以一起保存。
1.贊同；2.用Set Selected List Option這個(gè)action就行了；3.配置action時(shí)留意是否選擇了正確的widget；可以一起保存droplist的內(nèi)容。
換個(gè)中文版吧，看著藍(lán)瘦
朋友，你所說(shuō)的【雙擊中繼器“OnItemLoad”事件，分別為item_id，item_name，item_sex設(shè)置value，注意，我將item_id的value設(shè)置成了item.index】，其中雙擊‘onitemload’事件，在哪里執(zhí)行？
你可以選中中繼器， 在交互面板中找到onItemLoad事件。對(duì)于RP8來(lái)說(shuō)，就在界面的右上部分