導讀：中繼器表格是Axure高保真原型裡非常好用的一個元件，因為中繼器可以實現增刪改查的高保真的互動。本文作者樣式如何用多選下拉列表篩選中繼器表格，希望對你有幫助。
雖然中繼器是一個非常好用的元件，但是很多同學對中繼器都不太瞭解，網上很多關於中繼器篩選的教程都是基於最簡單的單選篩選，實際情況可能多選的情況會更加多。
例如，需要篩選出一份名單，裡面包含廣東和湖北的產品經理和測試經理，如下圖所示：
那這種情況是非常常用的，所以今天作者就教大家如果透過多選下拉列表對中繼器表格進行篩選。
案例對應的原型地址：https：//ey1pgp。axshare。com/#g=1
那下面我們一起開始學習製作吧。
一、材料準備
這個原型主要的製作材料就是多選下拉列表和中繼器，其他材料包括表格的表頭、分頁等。
1. 中繼器
1）中繼器內所需元件
我們用中繼器製作一個表格，表格有多少列就可以新增多少個矩形，這裡矩形命名為123456……方便我們後續製作互動，如果需要有操作列的話，可以在增加對應的文字標籤（例如修改、刪除），擺放如下圖所示
中繼器內基本元件就是這些，當然你們可以根據實際表格的大小增加或減少元件，也可以根據自己的喜好設定樣式及互動樣式，例如當雙行變色、移入變色等效果
2）中繼器表格設定
我們在中繼器表格裡填寫對應內容，或者直接從excel表格複製過來就行，這裡我們列名命名為Column1~6，分別對應上面的矩形1~6
3）中繼器互動設定
中繼器每項載入時，我們用設定文字的互動，將中繼器表格裡Column1~6的內容分別設定到上矩形1~6裡面即可
當然瞭如果你需要其他互動，例如移入行變色、排序、翻頁、分頁等效果，也可以自由新增。
2. 多選下拉列表
多選下拉列表的話，我是用中繼器版的多選下拉列表，你們也可以直接用Axure9裡面Sample ui patterns裡面的多選。不過系統自帶的不是用中繼器製作的，所以複用性會差一點，因為他裡面只有5個選項，如果增加選項的話就要增加多選按鈕的元件和對應的互動，其實就相當於寫死，會比較麻煩。
如果用中繼器版的多選下拉列表的話就不用擔心這個問題了，因為中繼器做的就可以直接在表格裡填寫選項，自動生成互動效果，所以推薦你們使用中繼器版的多選下拉列表，具體的製作方法在前面的文章也有介紹過，有興趣的同學們都可以看回之前的教程。
1）篩選原理
不管是用系統自動的多選下拉列表，還是用中繼器版的下拉列表，其實多可以實現多選篩選，原理都是一樣的。我們新建一個文字標籤，如果是用系統的下拉列表的話，預設設定為空，如果用中繼器版下載列表的話，在第一行載入時設定為空。
我們要把選中的值先傳遞到這個文字標籤裡，再用indexof函式進行篩選就可以實現了。
我們先來講一下如何傳值的問題，如果是系統自帶的下拉列表，我們在多選框選中的時候，設定文字為他原來的值再後面加上多選框的文字值，在多選框取消篩選的時候我們用replace函式，將文字標籤裡等於該選項的值替換為空值，這樣就相當於刪除了。如果是中繼器版的下拉列表，是透過中繼器某一列的值來控制是否選中的，那在每項載入時，我們寫一個條件，如果該行值為選中，就設定文字標籤的值為他原來的值再後面加上該行選項的值。這裡我們設定值的時候，兩個選項之間最好用特殊符號隔開，這裡可以避免誤篩選的情況，例如|選項1|選項2|選項3|。
那接下來我們就可以用篩選事件來進行篩選了，這篩選之前，我們要判斷文字標籤裡面的值是否為空值。
如果不是空值
，代表已經有選項被選中了，那我們就新增對中繼器表格進行篩選，這裡需要注意兩個點，
第一個點：如果是多條件篩選，我們就要取消勾選移除其他篩選，並且給該篩選命名，案例中第一個是對職位的篩選，因為職位是第三列，所以我們命名為篩選3。
第二個點：篩選的時候用indexof函式來篩選，例如文字標籤的文字為|選項1|選項2|選項3|，我們對中繼器裡對應列（案例中是第三列）進行篩選，indexof函式是返回對應文字位置的值，例如選項1在 |選項1|選項2|選項3| 這個文字的indexof的值為1，那如果indexof函式是返回的值為-1，即該文字在對應文本里不存在，例如選項4在 |選項1|選項2|選項3| 這個文字的indexof的值為-1，所以我們的篩選條件就是indexof函式篩選的值>-1。
如果文字標籤的值為空值，就是還沒有勾選任何一個選項，這裡我們的預設邏輯就是移除篩選，所以我們就用移除篩選的事件，預設移除對應的篩選。這裡面可以會有爭議的一點，就是如果全部沒選的話是不是應該繼續篩選，就是沒有篩選出任何結果就行了，我覺得也是可行的，看不同公司的習慣。其實多選下拉列表裡也可以全部預設選中，然後如果全部都沒勾選就當然不顯示任何資料了，那這樣做的話就不需要分條件了。
這樣一個多選列表對中繼器表格某一列的篩選就完成了，如果要用多個多選下拉列表對中繼器表格多列進行篩選的話也很簡單，我們把多選下拉列表和對應的文字標籤複製一下，修改下拉列表裡的選項名稱，然後改一下新增篩選那個事件，將名和對應列的列表改一下就可以了，因為前面主要的互動已經寫好了，所以就很簡單了。
這樣我們就完成了用多選下拉列表篩選中繼器表格的原型模板了，再次使用時，基本上就是在中繼器內匯入對應的表格內容和選項內容，既可以自動生成多條件的多選篩選效果，是不是很方便呢？
那以上就是本期的全部內容了，感謝您的閱讀，我們下期見~
作者：做產品但不是經理；微信公眾號：Axure高保真原型；
本文由 @做產品但不是經理 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。