中繼器是Axure 9.0中的高級元件，利用它可以實現(xiàn)很多重復(fù)元素的內(nèi)容。中繼器就像是一個巨大的容器，可以裝載任意內(nèi)容，編輯中繼器就如同編輯一個嶄新的頁面，在里面可以任意自由地添加元件并進(jìn)行界面布局，甚至為這些元件添加交互。中繼器又好像一個本地化的微型數(shù)據(jù)庫，通過前端頁面實現(xiàn)對數(shù)據(jù)的管理。本節(jié)將主要講解中繼器的功能及使用方法。

在前面的章節(jié)Axure 9.0基礎(chǔ)教程：史上最詳細(xì)的元件說明，建議你認(rèn)真看完（一）中，對中繼器元件做了簡單的介紹，

一、數(shù)據(jù)排序

1.1 添加排序

使用中繼器的“添加排序”動作可以對數(shù)據(jù)集中的數(shù)據(jù)項進(jìn)行排序。在動作配置面板中，選擇過濾條件，如下圖所示。

• 名稱：數(shù)據(jù)排序的名稱。
• 列：數(shù)據(jù)集中要參加排序的列。
• 排序類型：選擇按數(shù)字、文本、日期進(jìn)行排序。

• 排序：選擇數(shù)據(jù)展示的順序，包含升序、降序和升降序切換。

  
  
  添加排序.png

1.2 移除排序

使用中繼器的“移除排序”動作可以對已添加的排序規(guī)則進(jìn)行移除?？梢赃x擇移除所有過濾器，或者輸入名稱，移除指定的過濾器，如下圖所示：

移除排序.png

二、數(shù)據(jù)篩選

根據(jù)特定的篩選條件，使得頁面中只顯示符合篩選條件的數(shù)據(jù)。數(shù)據(jù)篩選通常是由中繼器外部的元件觸發(fā)的。下面我們來看看使用中繼器的動作，如何實現(xiàn)數(shù)據(jù)的篩選和移除篩選。

2.1 添加篩選

在中繼器動作列表中點擊“添加篩選”動作，在動作配置面板中選中中繼器并給中繼器添加篩選規(guī)則。如[[Item.price<=1999]]，意思是將價格小于等于的數(shù)據(jù)顯示出來，不符合條件的不顯示，如下圖所示。

添加篩選.png

2.2 移除篩選

使用中繼器動作列表中的“移除篩選”動作，可以把已添加的過濾移除?？梢赃x擇移除所有過濾，也可以輸入過濾名稱，移除指定的過濾，如下圖所示。

移除篩選.png

三、分頁

3.1 設(shè)置當(dāng)前頁

通過數(shù)據(jù)集填充了中繼器的數(shù)據(jù)，如果我們希望這些數(shù)據(jù)能夠分頁顯示，可以通過樣式面板設(shè)置分頁。然后，再通過“設(shè)置當(dāng)前顯示頁面”動作，動態(tài)設(shè)置中繼器元件默認(rèn)顯示的數(shù)據(jù)頁，如下圖所示。

設(shè)置分頁.png

設(shè)置當(dāng)前頁.png

3.2 設(shè)置每頁項目數(shù)量

設(shè)置每頁項目數(shù)量，允許改變當(dāng)前可見頁的數(shù)據(jù)項數(shù)量，如下圖所示。

• 顯示全部列表項：設(shè)置中繼器在一頁中顯示所有項。

• 每頁顯示多少項：設(shè)置中繼器每頁顯示數(shù)據(jù)項的數(shù)量。

  
  
  設(shè)置每頁項目數(shù)量.png

四、添加/移除中繼器的項

在生成的HTML原型中，中繼器的項可以被添加和刪除，但是要刪除特定的行，必須先“標(biāo)記行”。

4.1 添加行

使用“添加行”動作可以動態(tài)地添加數(shù)據(jù)到中繼器數(shù)據(jù)集。

• 01 在動作列表中選擇“添加行”。
• 02 選擇目標(biāo)元件，選中要添加項的中繼器。
• 03 點擊“添加行”按鈕。

• 04 在彈出的添加行到中繼器對話框中可以添加想要添加的數(shù)據(jù)了。

  
  
  添加行.png

4.2 標(biāo)記行

“標(biāo)記行”的意思就是選擇想要編輯的指定行。

• 01 在中繼器動作列表中選擇“標(biāo)記行”動作。
• 01 目標(biāo)元件選擇想要標(biāo)記項的中繼器。

• 03 然后使用查詢字符串標(biāo)記行。在這里可以編輯當(dāng)前行、標(biāo)記所有行，還可以按照規(guī)則標(biāo)記行。如[[item.price<=1999]]，意思是標(biāo)記所有價格小于等于1999元的商品，如下所示。

  
  
  標(biāo)記行.png

4.3 取消標(biāo)記行

“取消標(biāo)記行”動作可以用來取消選擇項。使用此動作可以取消標(biāo)記當(dāng)前行、取消標(biāo)記全部行，或者按規(guī)則取消標(biāo)記行，如下圖所示。

取消標(biāo)記行.png

4.4更新行

使用“更新行”動作，可以動態(tài)地將植插入到已選擇的中繼器項中，可以更新已標(biāo)記的行，也可以使用規(guī)則更新行。比如，首先使用“標(biāo)記行”動作選中任意一款或多款商品，再使用“更新行”動作將選中商品的銷量、價格和評價進(jìn)行更新，如下圖所示。

更新行-已標(biāo)記.png

或者，按規(guī)則更新行，見下圖。

• 01 在中繼器動作列表中選擇“更新行”動作。
• 02 目標(biāo)元件選擇要更新行的中繼器。
• 03 選擇規(guī)則。
• 04 添加規(guī)則，如下圖所示，標(biāo)記價格小于等于1999元的商品。

• 05 選擇更新的列并設(shè)置想要更新的內(nèi)容。

  
  
  更新行-規(guī)則.png

4.5 刪除行

如果你已經(jīng)對中繼器數(shù)據(jù)集中的項進(jìn)行了標(biāo)記行，則可以使用“刪除行”動作刪除已經(jīng)被標(biāo)記的行了。另外，還可以按照規(guī)則刪除行，如下圖所示。

刪除行.png

關(guān)于中繼器的功能及使用方法已經(jīng)講解完畢，后續(xù)我們在通過案例來說明中繼器的用途，通過應(yīng)用案例感受中繼器的強(qiáng)大。

如果你對Axure或原型設(shè)計有興趣，希望系統(tǒng)性地學(xué)習(xí)Axure知識，掌握更多Axure使用技巧；或者希望通過臨摹交互案例，進(jìn)一步提升高保交互設(shè)計能力。請點擊下方關(guān)注按鈕，查看更多連載作品。
點擊獲取案例作品源文件