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

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

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

傳送門：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、分頁

接下來我們來看看分頁組件的其他操作：

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

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

最后來看看這個頁碼指示器：

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

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

接著我們給這個指示器添加事件：

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

到這里整個分頁的功能就做完了。

四、查詢

查詢按鈕比較簡單，只是得區(qū)分場景，由于我們提供了兩個查詢條件，但是查詢時不一定都會輸入，所以需要判斷具體提供了多少個條件：

• 只提供了姓名，只按姓名查詢
• 只提供了年級，只按年級查詢
• 同時提供了姓名和年級，則按兩個條件查詢

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

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

五、添加和修改

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

以下是添加和修改彈窗：

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

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

接下來是添加、修改彈窗，當(dāng)我們在彈窗中修改信息或修改選項(xiàng)的時候，對應(yīng)的值會同步給對應(yīng)的全局變量：

接下來是保存按鈕的事件：

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

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

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

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

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