中繼器這個(gè)翻譯是讓人費(fèi)解的，如果直譯成“重復(fù)器”雖然不太專業(yè)但是更利于理解，或者干脆不編譯，用“Repeater”就行。用過(guò)Asp.Net的人，一定對(duì)里面的Repeater很熟悉，沒(méi)錯(cuò)，Axure的Repeater與Asp.Net的原理基本上是一樣的。本文教大家使用axure中繼器。

一、初識(shí)中繼器

從元件庫(kù)中找到中繼器，按住并拖入中間的操作區(qū)，我們可以看到它已經(jīng)有一列三行，分別寫(xiě)著1、2、3。

那么操作區(qū)中的1、2、3從哪里來(lái)的呢？聰明的同學(xué)已經(jīng)看出來(lái)了，在右側(cè)的“檢視：中繼器——中繼器”欄有一個(gè)編輯區(qū)，里邊便有1、2、3。但是這還不夠，如果我們把“檢視：中繼器——交互——每項(xiàng)加載時(shí)”中的“case1”刪除，那么操作區(qū)中1、2、3便消失了。由此可見(jiàn)，還需要“case1”把操作區(qū)和編輯區(qū)聯(lián)系在一起。

按“Ctrl+Z”撤銷“刪除case1”操作，雙擊“case1”打開(kāi)用例編輯《每項(xiàng)加載時(shí)》面板，我們來(lái)看看“case1”究竟做了什么。

只見(jiàn)上面寫(xiě)著 設(shè)置文字于（矩形）= “［［Item.Column0］］” 。頓生疑惑：什么？矩形？什么矩形？Item又是什么？Column0又是什么？Item.Column0又是什么？為什么要用“［［ ］］”包起來(lái)？

關(guān)掉用例編輯《每項(xiàng)加載時(shí)》面板，回到主界面，雙擊操作區(qū)的中繼器，打開(kāi)中繼器模式編輯操作區(qū)。

點(diǎn)擊中繼器模式編輯操作區(qū)中的矩形，可以看到右側(cè)“檢視：矩形”中名稱欄顯示“（矩形名稱）”，這就是上文中的“（矩形）”。

點(diǎn)擊“檢視：矩形”中的名稱欄，我們給這個(gè)矩形取名為“動(dòng)物”。

選中中繼器模式編輯操作區(qū)中的矩形，按“Ctrl+C”和“Ctrl+V”復(fù)制粘貼出新的矩形，拖動(dòng)矩形放置在原矩形的右側(cè)，并在右側(cè)“檢視：矩形”中名稱欄將矩形名稱改為“食物”。

將操作區(qū)切換回index頁(yè)面，我們可以看到發(fā)生了一些變化：中繼器變成了兩行三列，“case1”中的“矩形”也變成了“動(dòng)物”。這是我們剛才在中繼器模式編輯操作區(qū)修改的結(jié)果。

接下來(lái)，我們要做更多的操作。在右側(cè)“檢視：中繼器——中繼器”中，雙擊“Column0”，更名為“FirstColumn”，雙擊“添加列”，取名為“SecondColumn”。讓我們看看“case1”發(fā)生了什么變化。

我們將“Column0”改名“FirstColumn”之后，“case1”中的“Column0”也變?yōu)椤癋irstColumn”，由此我們可以意會(huì)他們的關(guān)系。

二、每項(xiàng)加載時(shí)

接下來(lái)，我們?cè)凇皺z視：中繼器——中繼器”的編輯區(qū)中填入一些動(dòng)物和食物的對(duì)應(yīng)關(guān)系，可以看到，操作區(qū)也發(fā)生了改變，但是只顯示了第一列，第二列卻沒(méi)有顯示。

這是因?yàn)椤癱ase1”只同步了第一列卻沒(méi)有同步第二列。接下來(lái)我們?cè)囍降诙小ｋp擊“case1”打開(kāi)用例編輯《每項(xiàng)加載時(shí)》面板，可以看到，“case1”只將“動(dòng)物（矩形）”和“FirstColumn”聯(lián)系起來(lái)。

有樣學(xué)樣，我們把“食物（矩形）”和“SecondColumn”也聯(lián)系起來(lái)。先勾選“食物（矩形）”，再將右下角的值由默認(rèn)的“［［Item.FirstColumn］］”改為“［［Item.SecondColumn］］”。聰明的同學(xué)應(yīng)該可以意識(shí)到，這個(gè)“［［Item.xxxxxx］］”是一種默認(rèn)格式，代表編輯區(qū)中xxxxxx列的值。很正確，Item就代表這個(gè)中繼器的編輯區(qū)，“［［ ］］”則代表取值，取中繼器編輯區(qū)xxxxxx列的值。

點(diǎn)擊確定按鈕，關(guān)閉用例編輯《每項(xiàng)加載時(shí)》面板，回到操作區(qū)，我們看到操作區(qū)中的中繼器的第二列成功地與編輯區(qū)中的第二列同步。

三、動(dòng)態(tài)添加

首先，我們添加兩個(gè)文本框分別用于輸入“動(dòng)物”和“食物”，再添加個(gè)用于提交數(shù)據(jù)的提交按鈕。

什么？提交數(shù)據(jù)？

將兩個(gè)文本框和提交按鈕分布在右側(cè)檢視的名稱欄改名為“輸入動(dòng)物”、“輸入食物”和“提交按鈕”。

點(diǎn)擊提交按鈕，在右側(cè)“檢視：提交按鈕——交互”中雙擊“鼠標(biāo)單擊時(shí)”，打開(kāi)用例編輯《鼠標(biāo)單擊時(shí)》面板。在左側(cè)添加動(dòng)作欄雙擊“中繼器——數(shù)據(jù)集”中的“添加行”。在右側(cè)配置動(dòng)作欄勾選“（中繼器）”（因?yàn)槲覀冞€沒(méi)給我們的中繼器取名，所以顯示為“（中繼器）”，跟前面提到的“（矩形）”一個(gè)道理）。

右側(cè)配置動(dòng)作欄下面點(diǎn)擊添加行打開(kāi)添加行到中繼器。

點(diǎn)擊“FirstColumn”下方，“添加行”右側(cè)的“fx”，打開(kāi)編輯值面板。點(diǎn)擊“局部變量”中的“添加局部變量”。

將“局部變量”中的“LVAR1”改為“Animal”，右側(cè)“輸入食物”改為輸入動(dòng)物。在上方“插入變量或函數(shù)”下方的輸入框輸入“［［Animal］］”（對(duì)應(yīng)上面的“Animal”，意為“Animal”變量的值）。

點(diǎn)擊確定按鈕關(guān)閉當(dāng)前面板。同樣操作第二列：點(diǎn)擊“SecondColumn”下方，“添加行”右側(cè)的“fx”，打開(kāi)編輯值面板進(jìn)行編輯。

同樣點(diǎn)擊確定按鈕關(guān)閉當(dāng)前面板。現(xiàn)在添加行到中繼器面板變成這個(gè)樣子，意思是單擊提交按鈕時(shí)，把“輸入動(dòng)物”文本框的值放在Animal中，把“輸入食物”文本框的值放在Food中，然后將Animal和Food的值分別作為第一列和第二列組成一行，將這一行添加到中繼器中。

點(diǎn)擊確定按鈕關(guān)閉添加行到中繼器面板。點(diǎn)擊確定按鈕關(guān)閉用例編輯《鼠標(biāo)單擊時(shí)》面板。回到主界面。

點(diǎn)擊右上角預(yù)覽按鈕打開(kāi)瀏覽器，在兩個(gè)輸入框中分別輸入動(dòng)物和食物，點(diǎn)擊提交按鈕，即可看到動(dòng)態(tài)添加的效果。

四、動(dòng)態(tài)刪除

那要?jiǎng)h除怎么做呢？也很簡(jiǎn)單。我們關(guān)掉瀏覽器，回到主界面，添加一個(gè)用于刪除的按鈕。

點(diǎn)擊右側(cè)“檢視：矩形——交互”中的“鼠標(biāo)單擊時(shí)”打開(kāi)用例編輯《鼠標(biāo)單擊時(shí)》面板，在左側(cè)添加動(dòng)作欄點(diǎn)擊“中繼器——數(shù)據(jù)集”中的“刪除行”，右側(cè)配置動(dòng)作欄勾選“（中繼器）”，下方的單選框選擇“已標(biāo)記”。意思是單擊按鈕時(shí)，刪除中繼器中已標(biāo)記的行。什么？已標(biāo)記？怎么標(biāo)記？

點(diǎn)擊確認(rèn)按鈕回到主界面。切換到“（中繼器）index”中繼器模式編輯操作區(qū)，按住“Ctrl”鍵點(diǎn)擊兩個(gè)矩形，右鍵，選擇“組合”。在右側(cè)“檢視：組合——Shapes——交互樣式設(shè)置”中點(diǎn)擊“選中”打開(kāi)交互樣式設(shè)置面板，找到填充顏色一項(xiàng)，勾選并將顏色改為你喜歡的顏色。按確定鍵關(guān)閉交互樣式設(shè)置面板。

再在右側(cè)“檢視：組合——交互”中雙擊“鼠標(biāo)單擊時(shí)”打開(kāi)用例編輯《鼠標(biāo)單擊》面板，在左側(cè)添加動(dòng)作欄“元件——設(shè)置選中”中點(diǎn)擊“切換選中狀態(tài)”，再勾選右側(cè)配置動(dòng)作欄中的“當(dāng)前元件”一項(xiàng)。這兩步操作的目的在于讓我們點(diǎn)擊某一行時(shí)這一行會(huì)變色來(lái)反饋我們選了該行。

我們還要讓我們點(diǎn)擊的某一行置為“已標(biāo)記”狀態(tài)，方便我們上文中說(shuō)到的用于刪除的按鈕刪除“已標(biāo)記的行”。在左側(cè)添加動(dòng)作欄“中繼器——數(shù)據(jù)集”中點(diǎn)擊“標(biāo)記行”，再勾選右側(cè)配置動(dòng)作欄中的“（中繼器）”一項(xiàng)。