Axure 7.0 部件里的中繼器是幹什麼用的？

01-08

axure 7.0部件里的中繼器是幹什麼用的，之前6.5沒有這個部件，是做什麼用的，怎麼使用，效果是什麼

1.首先我們拖一個中繼器到axure的界面里。

2.雙擊進入中繼器界面，會在頂部看到一個小長方形，而這個長方形沒有任何用，你可以直接刪除。當然也可以當作一個普通的長方形來使用。重點是下方的表格。

3.你可以在中繼器界面中隨意的編輯內容。中繼器數據設置（Repeater Dataset）下的表格可以用來存儲你需要的數據。你可以按照自己的需要編輯。

4.將設置好的數據綁定到上面裝數據的容器里

5.數據綁定好以後的效果

6.我們回到Axure的主頁

7.再雙擊中繼器，在「中繼器格式」中設置水平，再回到主頁看看效果，感受「中繼器格式」的用法。

8.下面介紹，將外部數據填入中繼器里，並且實現添加行。

最後生成到瀏覽器里查看效果：

------------------------

不懂就亂點點吧，點上兩三個小時結合其他的教程自己摸索應該能懂些。還能發現一些要學的點以外的意外收穫。。這是探索的樂趣啊對吧。。因為沒有在網上看到中繼器的輕鬆易懂的教程，所以感受了一把探索的樂趣o(∩_∩)o 。。

昨天深夜試用了一下axure7，發現對中繼器也同樣非常感興趣

從網上搜了一圈也沒找到具體用法，只好結合axure官網論壇自己研究了，剛出了點眉目

發現中繼器是類似於一個數據的集中地。

我們可以把一些數據，例如表格，列表等都塞到中繼器里，然後通過別的部件來操作中繼器中的數據，比如增加一條記錄，排序，分類，分頁等等。

有資料庫基礎的同學看到中繼器應該立刻明白該如何使用了

先挖個坑，等我有時間來補完整，其實我也在研究中。

--------------------------------------兩年了--------------------------------------

我來填坑了各位剛回答這個問題的時候axure7還處在測試版，現在一轉眼的功夫8都更新到正式版了。相信各位對Repeater應該都有一定的了解了吧。

先說說Repeater的應用場合

Repeater特別適合用在需要具備排序，分頁，新增一行，減掉一行，或者更新一行的表格中。還有一個我常用的場景是用他做商品展示的列表頁。

算了，等某個周末再來繼續填吧 O_o

--------------------------------------穿越時空分割線--------------------------------------

對於repeater來說，我們可以操作的維度分為兩部分。

第一部分是對於整個repeater來操作的，簡單理解就是可以設置整個repeater的排序方式、過濾方式、分頁規則等，這些操作可以綁定在任意的其他控制項（比如按鈕）上。支持的操作項包括：

添加排序（Add Sort）--可以為Repeater增加一個排序規則

移除排序（Remove Sort）--可以刪掉Repeater的排序規則

添加篩選（Add Filter）--可以為Repeater增加一個篩選規則

移除篩選（Remove Filter）--可以刪掉Repeater的排序規則

設置當前顯示頁面（Set Current Page）--可以設置Repeater顯示當前頁的規則

設置每頁項目數量（Set Item per Page）--可以設置Repeater每一頁顯示多少條目。

第二部分是對於repeater中的數據集（Datasets）的操作，簡單理解就是操作Repeater中的某一行，支持的操作項包括：

添加行（Add Rows）--可以通過一個規則來為Repeater添加一條（或多條）新記錄。

標記行（Mark Rows）--可以通過一個規則來標記Repeater中的某一條（或多條）記錄，用以對他進行後續操作。

取消標記行（Unmark Rows）--取消當前被標記的記錄。

更新行（Update Rows）--更新已經被標記的某一條（或多條）記錄的內容。

刪除行（Delete Rows）--刪除已經被標記的某一條（或多條）記錄。

--------------------------------------實例分割線--------------------------------------

生硬的普及概念不容易理解，現在我們通過製作商品列表這樣一個簡單的實例來讓知友深切的體會Repeater這玩意兒有多容易上手，而且靈活運用Repeater可以有效的幫助你生成模擬度極高的交互原型。

第一步，創建一個repeater

在主頁中，從控制項區域拖拽出來一個Repeater，命名為list of goods。這一步很基礎。你會看到主面板中出現了一個包含了三個矩形的半透明綠色的控制項，每個矩形里都一個數字，分別是1，2，3。現在我們就要讓這個半透明控制項變成我們希望的商品列表的樣子。雙擊這個控制項進入Repeater編輯模式。

第二步，設置Repeater

進入Repeater編輯模式後，你會在主面板看到一個未命名的矩形（Rectangle）孤獨的躺在那裡，先別搭理它，我們來看右側檢查器面板（Windows下我不知道叫什麼名字，總之位置一樣）。

先從紫色的區域2開始說起，這裡是用來為repeater填充數據用的，可以看到Column0這列被填充了1，2，3這三個數據，所以我們在第一步拖出來的Repeater里看到了分別寫有1，2，3的三個矩形，數字就是來源於這裡。現在我們把1，2，3這三個數字分別改為iPhone 5，iPhone 6，iPhone 6 Plus，iPhone 6s，iPhone 6s Plus。這時候回到主頁你是不是發現中繼器里的內容也跟著變了。OK，現在我們繼續填充數據，把第一列的表頭命名為Name（不要寫中文，會出錯！），然後繼續添加新列，為新列添加內容。在這裡我們只填3列數據，分別是名稱、售價和庫存。（這裡說明一下，Axure 8已經簡化了操作，現在不需要雙擊進入repeater，在主頁中直接選中repeater也可以快速填充數據了）

最後填充為這樣：

這時候回到首頁，你發現你仍然只能看到name這一列的內容，price和stock都沒有被顯示出來，為毛會這樣啊摔！！！

別著急，現在我們回過頭來看藍色的區域1，交互事件（Interactions）的OnItemLoad里有一個case，內容是Set text on(Rectangle) equal to"[[Item.name]]"

到這裡應該明白了，我們把名稱為name的那一列數據綁定到了那個未命名的矩形（Rectangle）上了。其他列並沒有綁定到某個控制項上，當然無從顯示了。

知道了這一點就好辦了，現在我們從空間區域里再拖拽出兩個矩形，現在我們有了三個未命名的矩形，順手給他們分別命名為Name、Price、Stock吧。

現在我們雙擊交互事件中的OnItemLoad事件來為兩個新的矩形綁定數據。只需將Repeater中每一列的文字分別賦值到三個矩形中就可以。這裡我假定你已經了解變數這個玩意兒該怎麼使用，否則我講起來就太費勁了。

回到主頁，是不是發現Repeater已經變成了下圖這樣↓，恭喜你，第二步你完成了！！

第三步，操作Repeater

現在，我們已經有了一個商品列表，但如果僅僅是為了製作這麼一個列表，我們直接用表格控制項不就行了么，做起來比Repeater快多了對不對。

顯然，這才剛開始，Repeater真正發揮實力的時刻到來了。

我們現在要往死了折騰這個表格，玩到它身體被掏空。為了呼應上文，我們對Repeater的操作也分為兩個章節來講，分別是操作整體Repeater和操作Repeater下的Datasets。

第四步，操作整體Repeater

上面已經說過，對於整體Repeater的操作包括排序、過濾、設置分頁這三種。現在我們來繼續豐富控制項，讓這幾種操控按鈕登場。

先用普通的矩形給列表加個表頭，這樣看著就更明確了。然後添加幾個按鈕，分別是售價正/倒序排列、去掉排序、過濾庫存&<100，去掉過濾。結果如下↓

現在，我們開始為每一個按鈕添加交互用例，第一個按鈕「售價正/倒序排列」：

選擇Repeater中的Add Sort（安裝過漢化包的自行對照），選中我們剛才創建的「List of goods」這個Repeater。可以看到下面有四行設置（也可能是五行），分別是：Name--為你的排序規則起一個名字，用於以後刪除規則和區別其他排序規則，因為我們要用售價來排序，所以這裡名稱叫售價排序；

Property--直譯是財產，這裡指的是你在這個Repeater中創建的那些列（name、price、stock），我們要用售價」price「來排序，所以這裡選擇price；

Sort as--排序依據，現在支持的排序依據有Number、Text、Text（Case sensitive）、Date-YYYY-MM-DD、Date-MM-DD-YYYY。這裡我們使用Number作為排序依據；

Order--排序方式，可以選擇正序、倒序和切換三種類型，我們的需求是可以讓商品列表依據售價多少來正序或者倒序排列，所以這裡選擇切換；

Default--默認排序方式，Order被選擇為Toggle時才會出現，用來定義默認的排序方式。

設置完畢後點擊OK，這時候預覽的你原型，點擊這個按鈕起作用了嗎？我這裡反正已經起作用了！

------------------------------------------------------------------------------------------------

現在來為第二個按鈕「去掉排序」添加交互用例：

選擇Repeater中的Remove Sort，然後選中我們創建的名為List of goods的Repeater。可以看到右側有兩項可以選擇：Remove all sorting、Name of sort to remove。如果選中Remove all sorting那麼所有的排序規則都會被刪除，且Name of sort to remove被禁用。如果不勾選的話，則Name of sort to remove可以填寫你需要刪除的排序規則的名稱，這裡Axure有點不夠智能，我覺至少應該把我所有創建的排序規則都列出來讓我選擇才對，但是這裡只能手工填寫，因為我們剛才創建了一個名字為「售價排序」的排序規則，所以這裡我們填寫「排序規則」，OK，這個按鈕的交互用例添加完畢，預覽你的原型可以看到效果了。

------------------------------------------------------------------------------------------------

現在第三個按鈕「篩選庫存&<100」的按鈕添加交互用例。商品列表中只有iPhone 5的庫存小與100，所以如果我們設置成功的話，點擊這個按鈕會看到商品列表中iPhone 5之外的手機都會被過濾掉。

選擇Repeater中的Add Filter，選擇List of goods這個Repeater，右側下方有三個設置項：Remove other filter、Name、Rule。Remove other filter默認被選中的，也就是說執行這個操作將會同時刪掉其他的篩選條件。Name可以為你的篩選規則起一個名字，這裡我們叫「顯示庫存小於100的手機」。Rule這裡指定篩選的規則，需要一點變數知識，知友按照我截圖裡的方法寫就可以了。OK，現在預覽你的原型，點擊第三個按鈕起作用了嗎？效果應該是這樣的↓。

------------------------------------------------------------------------------------------------

該第四個按鈕「去掉過濾」添加交互用例了。

這裡的設置方法跟「去掉排序」非常非常類似，我就不鋪開講了，為了省事我直接選中了Remove all filters這個選項。預覽原型可以看到效果，點擊這個按鈕後所有被「篩選庫存&<100」按鈕過濾掉的商品都會回來了。

講到這裡，對於整個Repeater的排序和過濾的講解就基本告一段落了，知友們可以靈活運用，發揮創造力，其實它的能力遠不止此。下面我要繼續講解對於整個Repeater的分頁操作了。

------------------------------------------------------------------------------------------------

為一個Repeater分頁有兩種方式：

第一種是在Repeater的檢查器中，選中Multiple Page後可以設置將當前這個Repeater分隔為每頁幾行，初始顯示第幾頁。這種方式可以定義Repeater初始的分頁規則。

第二種方式是將分頁規則綁定在一個控制項上，這種方式常見於論壇和商品列表，大多數的論壇都支持每頁顯示多少帖子，第二種方式就是用來干這事的。

現在我們先將Repeater的分頁規則設置為每頁兩行（Item per page=2），然後再從控制項面板里拖出來一按鈕，命名為每頁三行。這樣就很容易區分了。

可以看到主面板的Repeater已經只顯示兩行了，現在我們為「每頁三行」的按鈕添加交互用例↓。

選擇Repeater中的Set Item per Page，選中List of goods，可以看到右側下方有兩個設置項：Show All Items、# per page。Show All Items可以清掉當前的分頁方式，把所有的行都展示出來。# per page可以定義每頁顯示多少行，這裡我們填3，也可以填寫一個演算法，很靈活。OK之後預覽原型，對比默認的行數和點擊了「每頁三行」按鈕之後Repeater的行數變化。正常的情況應該是刷新頁面商品列表展示兩行數據，點擊「每頁三行」按鈕後商品列表展示三行數據。

------------------------------------------------------------------------------------------------

現在講一下設置當前頁（Set Current Page）這個功能，這個功能只用於Repeater已經被分頁的情況，它可以讓你控制當前Repeater應該展示第幾頁。比如你瀏覽草榴論壇時翻到第二頁、第三頁、第四頁.........

我們再從控制項區拖出一個控制項，命名為」翻到第二頁「，點擊它之後，當前這個默認每頁只顯示兩行的Repeater應該被翻到第二頁才對（這裡為了不做過多的延伸，我們沒有為每頁分配一個頁碼，相信知友們知道怎麼做）。

為」翻到第二頁「的按鈕分配交互用例↓。

選擇Repeater中的Set Current Page，選中List of goods。可以看到下面的Select the page下拉框分別可以選擇：Value、Previous、Next、Last四個選項。選中Value時可以在下方的Page #中填寫你需要翻到的頁面，支持直接輸入數字，也支持填入一個演算法，這裡按照我們的需求填寫2；而選擇Previous、Next、Last時可以實現前一頁、下一頁、最後一頁的功能，非常實用。OK，預覽你的原型來查看效果吧。

你會發現第一頁展示的是iPhone 5和iPhone 6，點擊」翻到第二頁「按鈕後，商品列表中的條目變成了iPhone 6 Plus和iPhone 6s。恭喜你！

------------------------------------------------------------------------------------------------對於整個Repeater的基本操作到這裡全部講完了，我說的都是非常非常簡單的用法，掌握之後可以組合出很多花樣的玩法，我就不鋪開講了。

知乎的編輯器太弱了，寫的好累。。。。。。

------------------------------------------------------------------------------------------------

從頭看到這裡的知友是不是發現我還沒有講對於Datasets（數據集）的操作呢。

對，我再挖個坑，等下次媳婦出差再來補充，再見各位。

就官網的介紹和自己的使用分析，Repeater控制項其實可以理解為帶數據交互功能的表單，你可以完成以往需要配合動態面板才能完成的諸如過濾，排序功能，並能根據輸入的數據實時添加記錄。尤其是過濾功能在製作網站的高級搜索的時候根據選擇條件不同顯示不同結果有很大幫助，在以往單單用動態面板製作難度大而且這方面的模擬度也受到限制。

總的來說，個人認為Repeater控制項是7.0此次升級的功能中和增加的諸多移動事件相等重要的新功能，結合之前掌握的基礎技能相信能夠迸發出更大的能量。

http://www.axure.com/forum/v7-beta-repeater-widget/7967-intro-repeater-widget.html

Axure部件Repeater，一直覺得這個單詞用的很形象，是使一條條數據在頁面上重複顯示（repeat）的部件，因此叫repeater，所以每當需要將數據條目顯示在頁面上時，很容易想到要使用repeater。

在中文版中，repeater部件被翻譯成為中繼器，所謂「中繼」的含義更廣，不光是把數據在頁面上顯示的「中繼」，也是可以對數據進行操作的「中繼」。因此，中繼器大體上有兩部分功能，數據顯示，和數據存儲。

在數據顯示方面，和其他部件一樣，可以直接對其布局，例如是行還是列，是條目還是卡片，是否要分頁，顯示的風格樣式等。

在資料庫方面，中繼器提供了最基本的增，減，改，查，以及排序功能，這些功能在axure動作裡面都有提供。

還有一個實用而容易忽略的概念，selection group，中文版中為選項組。

選項組的存在有點像單選框，設置了選項組後，所屬同一個選項組中的部件只能有一個被選中，其他條目中的該元件都自動取消選擇。

具體例子，在中繼器條目中添加一個標籤，設置交互風格為選中字體為紅色，然後設置其選擇組為unique。