中繼器是 Axure 中相對(duì)較難上手的一個(gè)元件，但是一旦熟練掌握后，可以讓產(chǎn)品經(jīng)理在做一些重復(fù)性設(shè)計(jì)比較多的頁(yè)面時(shí)，獲得事半功倍的效果，本文主要通過(guò)講解中繼器的屬性和事件，帶你初窺中繼器的世界。

當(dāng)你掌握了中繼器的用法，在做一些重復(fù)性設(shè)計(jì)的頁(yè)面的時(shí)候，可以獲得事半功倍的效果，令你心情愉悅；但是你會(huì)發(fā)現(xiàn)中繼器與“渣男”一樣，難以掌握，它不僅“渣”，而且“雜”，復(fù)雜，要真正運(yùn)用好中繼器有一定的難度，本篇文章將告訴你中繼器的各種特性，教你將中繼器這個(gè)“渣男”拿捏。

本文是中繼器教程的最后一篇，也是綜合運(yùn)用實(shí)戰(zhàn)，如果你對(duì)中繼器的使用還不是很熟悉，甚至之前都沒(méi)有用過(guò)中繼器，建議先看前面的“基礎(chǔ)篇”和“進(jìn)階篇”，否則閱讀本文對(duì)你來(lái)說(shuō)會(huì)有點(diǎn)吃力。

傳送門(mén)：

《【Axure 教程】中繼器，你這個(gè)“渣男”（基礎(chǔ)篇）》

《【Axure 教程】中繼器，你這個(gè)“渣男”（進(jìn)階篇）》

本次我們的實(shí)戰(zhàn)項(xiàng)目是做一個(gè)學(xué)生管理表，以下是界面截圖：

一、界面設(shè)計(jì)

界面這塊非常簡(jiǎn)單，最上面是查詢(xún)條件和添加按鈕，中間的表格是一個(gè)中繼器，最下面是分頁(yè)操作，還有一個(gè)隱藏的彈窗，用來(lái)添加和修改數(shù)據(jù)用的。

中繼器里面放了一行表格，為了方便我們待會(huì)能快速找到對(duì)應(yīng)的單元格填入數(shù)據(jù)，建議給每個(gè)單元格做好命名：

中繼器的字段如下，為了方便演示，我在中繼器內(nèi)放了100行數(shù)據(jù)：

最后我們還需要幾個(gè)相對(duì)應(yīng)的全局變量，其中需要注意的是【add_or_update】這個(gè)變量，由于我這里設(shè)計(jì)的添加和編輯用的是同一個(gè)彈窗，所以需要一個(gè)變量來(lái)告訴系統(tǒng)當(dāng)前正在做的操作是添加還是編輯：

二、載入數(shù)據(jù)

載入數(shù)據(jù)非常簡(jiǎn)單，只需要給【中繼器】添加【每項(xiàng)加載時(shí)】的事件，將各個(gè)字段的值填入到對(duì)應(yīng)的單元格即可：

但你會(huì)發(fā)現(xiàn)，這里并沒(méi)有一次性加載全部的100條數(shù)據(jù)，而是只加載了其中的10條：

這是因?yàn)槲以谥欣^器載入的時(shí)候，做了一個(gè)分頁(yè)，每頁(yè)的數(shù)據(jù)條數(shù)獲取的是下方分頁(yè)板塊中的【每頁(yè)數(shù)據(jù)條數(shù)】的默認(rèn)值：

【每頁(yè)數(shù)據(jù)條數(shù)】除了默認(rèn)的10條，里面還有其他的選項(xiàng)：

為了實(shí)現(xiàn)修改選項(xiàng)時(shí)，能夠根據(jù)所選擇的選項(xiàng)改變每頁(yè)展示的數(shù)據(jù)條數(shù)，需要給這個(gè)下拉框添加【選項(xiàng)改變時(shí)】的事件：

這樣當(dāng)我們切換下拉框的值時(shí)，上方列表會(huì)根據(jù)選項(xiàng)自動(dòng)展示對(duì)應(yīng)的數(shù)據(jù)條數(shù)：

這里還有個(gè)問(wèn)題，就是列表是動(dòng)態(tài)的，因此分頁(yè)的組件位置應(yīng)該也是跟著列表動(dòng)態(tài)變化的，所以在切換選項(xiàng)的時(shí)候，我們需要調(diào)整分頁(yè)組件的位置：

這里我是在中繼器高度的基礎(chǔ)上增加100，剛好就是圖中看到的效果，同樣，在中繼器載入的時(shí)候，我們根據(jù)下拉選項(xiàng)調(diào)整了列表的高度，所以也需要同步調(diào)整分頁(yè)組件的位置：

這里在設(shè)置每頁(yè)數(shù)量之后加了一個(gè)等待事件，是為了等待中繼器數(shù)據(jù)加載完成并完成分頁(yè)，如果中繼器的數(shù)據(jù)還沒(méi)有加載完成，就移動(dòng)分頁(yè)組件，可能會(huì)導(dǎo)致分頁(yè)組件放置的位置不對(duì)。

三、分頁(yè)

接下來(lái)我們來(lái)看看分頁(yè)組件的其他操作：

【第一頁(yè)】很簡(jiǎn)單，直接添加【設(shè)置當(dāng)前顯示頁(yè)面】的事件，頁(yè)面選擇【值】，頁(yè)碼設(shè)為【1】：

【上一頁(yè)】、【下一頁(yè)】、【最后一頁(yè)】用的也是相同的事件，在【頁(yè)面】選項(xiàng)中選擇對(duì)應(yīng)的選項(xiàng)即可：

最后來(lái)看看這個(gè)頁(yè)碼指示器：

這個(gè)指示器除了顯示當(dāng)前的總頁(yè)數(shù)、所在的頁(yè)數(shù)，還具有快捷跳轉(zhuǎn)頁(yè)面的功能：

為了使這個(gè)指示器能動(dòng)態(tài)顯示總頁(yè)數(shù)和所在頁(yè)數(shù)，我們需要在中繼器的每項(xiàng)加載時(shí)給這個(gè)指示器的輸入框設(shè)置文本，文本內(nèi)容如下截圖，兩個(gè)參數(shù)我在“進(jìn)階篇”中講過(guò)，前面是顯示當(dāng)前所在頁(yè)數(shù)，后面的是總頁(yè)數(shù)：

接著我們給這個(gè)指示器添加事件：

• 獲得焦點(diǎn)時(shí)，清空內(nèi)容，等待輸入頁(yè)碼；
• 失去焦點(diǎn)時(shí)，顯示所在頁(yè)數(shù)和總頁(yè)數(shù)
• 如果輸入不為空且按下了【回車(chē)】鍵，則跳轉(zhuǎn)到所輸入的頁(yè)碼的頁(yè)面

到這里整個(gè)分頁(yè)的功能就做完了。

四、查詢(xún)

查詢(xún)按鈕比較簡(jiǎn)單，只是得區(qū)分場(chǎng)景，由于我們提供了兩個(gè)查詢(xún)條件，但是查詢(xún)時(shí)不一定都會(huì)輸入，所以需要判斷具體提供了多少個(gè)條件：

• 只提供了姓名，只按姓名查詢(xún)
• 只提供了年級(jí)，只按年級(jí)查詢(xún)
• 同時(shí)提供了姓名和年級(jí)，則按兩個(gè)條件查詢(xún)

注意添加篩選的時(shí)候，不要選擇【移除其他篩選】。

重置很簡(jiǎn)單，就是移除所有篩選條件，然后把兩個(gè)查詢(xún)條件清空或置為默認(rèn)：

五、添加和修改

刪除我就不講了，太簡(jiǎn)單，在“進(jìn)階篇”已經(jīng)講過(guò)了，接下來(lái)講講添加和修改。

以下是添加和修改彈窗：

點(diǎn)擊添加時(shí)，顯示彈窗，并把所有字段內(nèi)容清空，下拉選項(xiàng)設(shè)置為默認(rèn)值，并且給變量【add_or_update】設(shè)置為【add】，表示我們準(zhǔn)備做添加操作：

點(diǎn)擊編輯的邏輯跟添加差不多，不過(guò)一般編輯時(shí)我們需要填入已有的信息，所以這里我們給幾個(gè)字段填入當(dāng)前行的數(shù)據(jù)，并且給變量【add_or_update】設(shè)置為【update】，表示我們準(zhǔn)備做修改操作，同時(shí)需注意，這里我們還需要先取消所有行的標(biāo)記（確保不會(huì)有其他行被標(biāo)記），再標(biāo)記當(dāng)前行（確保能知道當(dāng)前準(zhǔn)備修改的行）：

接下來(lái)是添加、修改彈窗，當(dāng)我們?cè)趶棿爸行薷男畔⒒蛐薷倪x項(xiàng)的時(shí)候，對(duì)應(yīng)的值會(huì)同步給對(duì)應(yīng)的全局變量：

接下來(lái)是保存按鈕的事件：

直接根據(jù)【add_or_update】的值來(lái)判斷當(dāng)前是做添加還是修改，如果是添加，直接往中繼器中添加行，如果是修改，則是更新當(dāng)前標(biāo)記的行，更新之后，再取消所有行的標(biāo)記。

添加和修改的數(shù)據(jù)源直接設(shè)為對(duì)應(yīng)的全局變量即可：

最后是取消和關(guān)閉按鈕的事件，直接隱藏彈窗并取消所有行的標(biāo)記即可：

好了，以上就是本次中繼器的實(shí)戰(zhàn)項(xiàng)目，如果大家想更好地掌握好中繼器的使用，記得多找一些項(xiàng)目來(lái)多做練習(xí)即可。

如果文章對(duì)你有幫助，不妨點(diǎn)個(gè)“收藏”或“喜歡”，也歡迎關(guān)注我，一個(gè)不務(wù)正業(yè)的產(chǎn)品經(jīng)理，感謝閱讀！