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

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

我將分3個篇章來講完中繼器的功能，不一定能涵蓋所有的操作，但我相信實際項目設(shè)計中真正能用到的，應(yīng)該不會超出我分享的內(nèi)容，這3個篇章分別是：

1. 基礎(chǔ)篇：非?；A(chǔ)的入門，只講中繼器的增刪改查
2. 進階篇：分享中繼器的進階操作，分頁、標記行等
3. 實戰(zhàn)篇：通過中繼器的各種功能來綜合設(shè)計一個簡單的表單增刪改查的小項目

一、初識中繼器

中繼器是 Axure 中一個比較高階的應(yīng)用，它可以讓我們在純靜態(tài)網(wǎng)頁中模擬出類似帶有后臺數(shù)據(jù)交互的增刪改查的效果，雖然它沒有真正意義上幫我們存儲任何的數(shù)據(jù)，但是當我們在一次項目體驗過程中，它卻可以給我們帶來更加真實的交互效果，我們可以把中繼器理解為是一個臨時的數(shù)據(jù)庫表，在我們退出當前預(yù)覽之前，它都可以幫我們存儲所需的數(shù)據(jù)。

如果你有學(xué)過數(shù)據(jù)庫的話，對于中繼器的掌握是很容易的，但如果你完全沒有接觸過數(shù)據(jù)庫，也不清楚數(shù)據(jù)庫原理，那么本篇文章應(yīng)該會適合你。

接下里，我們先在 Axure 中拖入一個【中繼器】：

這是 Axure 默認的中繼器效果，我們雙擊打開看一下：

打開之后，我們發(fā)現(xiàn)里面只有一個矩形，那么問題就來了：

1. 里面只有一個矩形，但是為什么我們在外面看到的是3個？
2. 里面的矩形是沒有內(nèi)容的，但是為什么外面看到的矩形卻有數(shù)字？

我們再返回中繼器的外層，發(fā)現(xiàn)這個中繼器有一個事件，就是【每項加載】的時候，給矩形【設(shè)置文本】，這下我們就知道了，原來矩形的文字是在這里設(shè)置的，但是這里的參數(shù)是什么意思？而且現(xiàn)在依然沒有解決為什么有3個矩形的問題。

別急，我們點一下這個中繼器的【樣式】看一下：

我們發(fā)現(xiàn)，在【樣式】里面有一個【數(shù)據(jù)】表格，里面有一列【Column0】，數(shù)據(jù)正好是我們所看到的1、2、3，我們可以這樣猜想：

矩形的數(shù)量和文字是根據(jù)中繼器中的這個【數(shù)據(jù)】來動態(tài)加載的，我們只需要添加一個矩形，中繼器會根據(jù)數(shù)據(jù)的條數(shù)來動態(tài)增加矩形的數(shù)量，并且可以將每一行的數(shù)據(jù)設(shè)置為矩形的文字。

根據(jù)這個猜想，我們可以嘗試在這個數(shù)據(jù)中添加一行，命名為【4】，再來看看效果：

可以發(fā)現(xiàn)，這個跟我們預(yù)測的效果是一樣的，這樣我們大概就清楚了，中繼器是一個可以讓我們通過動態(tài)數(shù)據(jù)來控制設(shè)計元素的一個東西，那既然是動態(tài)數(shù)據(jù)，總不能是一開始在 Axure 里面設(shè)定好的吧，我在網(wǎng)頁上應(yīng)該也要能夠編輯，才叫動態(tài)，那我們就來嘗試一下，對這個中繼器做一個增、刪、改、查。

二、增

我們在中繼器上方拖入一個按鈕，命名為“添加行”：

給按鈕添加點擊事件，發(fā)現(xiàn)在【中繼器動作】里面有很多的操作可以選，后面我們會一一講到，我們選擇這里的【添加行】：

然后選擇我們要操作的中繼器：

選擇后點擊【添加行】：

彈出【添加行到中繼器】窗口：

我們發(fā)現(xiàn)，這里添加行除了可以指定一個數(shù)值，也可以是一個【函數(shù)表達式】，我們先指定一個固定值，比如【5】：

保存后我們來看看在瀏覽器中的效果：

可以看到，我們每點擊一下，就會動態(tài)增加一個矩形，不過因為我們是指定的固定值的原因，所以增加的矩形的文字都是【5】，這樣，我們就做完了中繼器的添加功能。

三、刪

剛剛是增加，接下來我們來做刪除，同樣拖入一個按鈕，命名為【刪除行】：

接下來我們給按鈕添加【中繼器動作】中的【刪除行】：

可以發(fā)現(xiàn)，系統(tǒng)要求我們提供一個刪除條件，要么按【規(guī)則】刪除行，要么刪除【已標記】的行，【標記】的功能會在“進階篇”中介紹，這里我們按規(guī)則來，這里講講為什么要有這個規(guī)則。

如果沒有規(guī)則的話，在刪除時就會把所有數(shù)據(jù)清空，經(jīng)驗告訴我們，真實業(yè)務(wù)中會把所有數(shù)據(jù)清空這種行為，除了誤操作，基本不太可能出現(xiàn)，所以一般都會要求給定一些條件作為刪除的規(guī)則。

這里系統(tǒng)也給我們提供了一個參考，就是指定中繼器的某個字段名=指定的內(nèi)容時，刪除對應(yīng)行，我們可以照貓畫虎改一下，因為我們只有一行，所以很好寫，就當某一行的數(shù)據(jù)等于【1】時，我們刪除掉，我們可以這樣寫：

接下來看看效果：

跟預(yù)期效果是一樣的，刪除的功能我們也做完了。

四、改

接下來我們來嘗試修改某一行的數(shù)據(jù)，比如將其中的【3】改成【9】，同樣拖入一個按鈕，命名為【更新行】：

然后給按鈕添加【中繼器動作】中的【更新行】，同樣為了避免將所有的數(shù)據(jù)改掉，系統(tǒng)會要求我們設(shè)定一個規(guī)則，而規(guī)則的下方則要求我們提供需要修改的列以及修改后的值，我們就按下方這樣配置，因為只有一列，我們這里的意思相當于就是找到數(shù)據(jù)為【3】的那一列，并改成【9】：

保存后看看效果：

這樣修改的功能我們也做完了。

五、查

最后來做查的功能，同樣拖入一個按鈕，命名為【添加篩選】：

我們給它添加【中繼器事件】中的【添加篩選】動作：

可以看到，系統(tǒng)要求我們給定一個篩選的條件，那我們來試一下把數(shù)據(jù)為【4】的行篩選出來，像下圖這樣寫，我們還可以給查詢條件命名，這樣在【移除篩選】的時候，可以移除指定名稱的篩選條件：

這里的【移除其他篩選】的意思是，如果此時有其他的篩選條件，則清空掉，按當前的篩選條件來篩選，如果不勾選，則是在已有篩選條件的基礎(chǔ)上進行篩選，我們保存一下來看效果：

我們發(fā)現(xiàn)，點擊之后，只剩數(shù)據(jù)為【4】的這條數(shù)據(jù)，其他數(shù)據(jù)呢，都被刪除了嗎？其實沒有，只是被隱藏起來而已，我們可以添加一個新的按鈕來【移除篩選】：

移除篩選的時候，可以移除全部篩選條件，也可以按名稱移除指定名稱的篩選條件：

保存后我們來看看效果，當我們點擊【添加篩選】時，數(shù)據(jù)只剩下【4】，但點擊【移除篩選】，所有數(shù)據(jù)又出來了：

這樣中繼器增刪改查的功能就做完了，但是你可能會說，實際業(yè)務(wù)中不可能是這樣操作的，比如我要更新或刪除某條數(shù)據(jù)，肯定是直接找到某一行進行修改和刪除，不可能事先設(shè)定好條件，這個就涉及到怎么在中繼器中標記行的問題了。

接下來我將在“進階篇”的教程中分享如何在中繼器中刪除或修改指定行的數(shù)據(jù)，敬請關(guān)注，如果文章對你有用，不妨點擊“收藏”或“喜歡”，感謝閱讀！