導(dǎo)讀：中繼器表格是Axure高保真原型里非常好用的一個(gè)元件，因?yàn)橹欣^器可以實(shí)現(xiàn)增刪改查的高保真的交互。本文作者樣式如何用多選下拉列表篩選中繼器表格，希望對(duì)你有幫助。

雖然中繼器是一個(gè)非常好用的元件，但是很多同學(xué)對(duì)中繼器都不太了解，網(wǎng)上很多關(guān)于中繼器篩選的教程都是基于最簡(jiǎn)單的單選篩選，實(shí)際情況可能多選的情況會(huì)更加多。

例如，需要篩選出一份名單，里面包含廣東和湖北的產(chǎn)品經(jīng)理和測(cè)試經(jīng)理，如下圖所示：

那這種情況是非常常用的，所以今天作者就教大家如果通過多選下拉列表對(duì)中繼器表格進(jìn)行篩選。

案例對(duì)應(yīng)的原型地址：https://ey1pgp.axshare.com/#g=1

那下面我們一起開始學(xué)習(xí)制作吧。

一、材料準(zhǔn)備

這個(gè)原型主要的制作材料就是多選下拉列表和中繼器，其他材料包括表格的表頭、分頁等。

1. 中繼器

1）中繼器內(nèi)所需元件

我們用中繼器制作一個(gè)表格，表格有多少列就可以添加多少個(gè)矩形，這里矩形命名為123456……方便我們后續(xù)制作交互，如果需要有操作列的話，可以在增加對(duì)應(yīng)的文本標(biāo)簽（例如修改、刪除），擺放如下圖所示

中繼器內(nèi)基本元件就是這些，當(dāng)然你們可以根據(jù)實(shí)際表格的大小增加或減少元件，也可以根據(jù)自己的喜好設(shè)置樣式及交互樣式，例如當(dāng)雙行變色、移入變色等效果

2）中繼器表格設(shè)置

我們?cè)谥欣^器表格里填寫對(duì)應(yīng)內(nèi)容，或者直接從excel表格復(fù)制過來就行，這里我們列名命名為Column1~6，分別對(duì)應(yīng)上面的矩形1~6

3）中繼器交互設(shè)置

中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將中繼器表格里Column1~6的內(nèi)容分別設(shè)置到上矩形1~6里面即可

當(dāng)然了如果你需要其他交互，例如移入行變色、排序、翻頁、分頁等效果，也可以自由添加。

2. 多選下拉列表

多選下拉列表的話，我是用中繼器版的多選下拉列表，你們也可以直接用Axure9里面Sample ui patterns里面的多選。不過系統(tǒng)自帶的不是用中繼器制作的，所以復(fù)用性會(huì)差一點(diǎn)，因?yàn)樗锩嬷挥?個(gè)選項(xiàng)，如果增加選項(xiàng)的話就要增加多選按鈕的元件和對(duì)應(yīng)的交互，其實(shí)就相當(dāng)于寫死，會(huì)比較麻煩。

如果用中繼器版的多選下拉列表的話就不用擔(dān)心這個(gè)問題了，因?yàn)橹欣^器做的就可以直接在表格里填寫選項(xiàng)，自動(dòng)生成交互效果，所以推薦你們使用中繼器版的多選下拉列表，具體的制作方法在前面的文章也有介紹過，有興趣的同學(xué)們都可以看回之前的教程。

1）篩選原理

不管是用系統(tǒng)自動(dòng)的多選下拉列表，還是用中繼器版的下拉列表，其實(shí)多可以實(shí)現(xiàn)多選篩選，原理都是一樣的。我們新建一個(gè)文本標(biāo)簽，如果是用系統(tǒng)的下拉列表的話，默認(rèn)設(shè)置為空，如果用中繼器版下載列表的話，在第一行加載時(shí)設(shè)置為空。

我們要把選中的值先傳遞到這個(gè)文本標(biāo)簽里，再用indexof函數(shù)進(jìn)行篩選就可以實(shí)現(xiàn)了。

我們先來講一下如何傳值的問題，如果是系統(tǒng)自帶的下拉列表，我們?cè)诙噙x框選中的時(shí)候，設(shè)置文本為他原來的值再后面加上多選框的文本值，在多選框取消篩選的時(shí)候我們用replace函數(shù)，將文本標(biāo)簽里等于該選項(xiàng)的值替換為空值，這樣就相當(dāng)于刪除了。如果是中繼器版的下拉列表，是通過中繼器某一列的值來控制是否選中的，那在每項(xiàng)加載時(shí)，我們寫一個(gè)條件，如果該行值為選中，就設(shè)置文本標(biāo)簽的值為他原來的值再后面加上該行選項(xiàng)的值。這里我們?cè)O(shè)置值的時(shí)候，兩個(gè)選項(xiàng)之間最好用特殊符號(hào)隔開，這里可以避免誤篩選的情況，例如|選項(xiàng)1|選項(xiàng)2|選項(xiàng)3|。

那接下來我們就可以用篩選事件來進(jìn)行篩選了，這篩選之前，我們要判斷文本標(biāo)簽里面的值是否為空值。

如果不是空值，代表已經(jīng)有選項(xiàng)被選中了，那我們就添加對(duì)中繼器表格進(jìn)行篩選，這里需要注意兩個(gè)點(diǎn)，

第一個(gè)點(diǎn)：如果是多條件篩選，我們就要取消勾選移除其他篩選，并且給該篩選命名，案例中第一個(gè)是對(duì)職位的篩選，因?yàn)槁毼皇堑谌?，所以我們命名為篩選3。

第二個(gè)點(diǎn)：篩選的時(shí)候用indexof函數(shù)來篩選，例如文本標(biāo)簽的文字為|選項(xiàng)1|選項(xiàng)2|選項(xiàng)3|，我們對(duì)中繼器里對(duì)應(yīng)列（案例中是第三列）進(jìn)行篩選，indexof函數(shù)是返回對(duì)應(yīng)文本位置的值，例如選項(xiàng)1在 |選項(xiàng)1|選項(xiàng)2|選項(xiàng)3| 這個(gè)文本的indexof的值為1，那如果indexof函數(shù)是返回的值為-1，即該文本在對(duì)應(yīng)文本里不存在，例如選項(xiàng)4在 |選項(xiàng)1|選項(xiàng)2|選項(xiàng)3| 這個(gè)文本的indexof的值為-1，所以我們的篩選條件就是indexof函數(shù)篩選的值>-1.

如果文本標(biāo)簽的值為空值，就是還沒有勾選任何一個(gè)選項(xiàng)，這里我們的默認(rèn)邏輯就是移除篩選，所以我們就用移除篩選的事件，默認(rèn)移除對(duì)應(yīng)的篩選。這里面可以會(huì)有爭(zhēng)議的一點(diǎn)，就是如果全部沒選的話是不是應(yīng)該繼續(xù)篩選，就是沒有篩選出任何結(jié)果就行了，我覺得也是可行的，看不同公司的習(xí)慣。其實(shí)多選下拉列表里也可以全部默認(rèn)選中，然后如果全部都沒勾選就當(dāng)然不顯示任何數(shù)據(jù)了，那這樣做的話就不需要分條件了。

這樣一個(gè)多選列表對(duì)中繼器表格某一列的篩選就完成了，如果要用多個(gè)多選下拉列表對(duì)中繼器表格多列進(jìn)行篩選的話也很簡(jiǎn)單，我們把多選下拉列表和對(duì)應(yīng)的文本標(biāo)簽復(fù)制一下，修改下拉列表里的選項(xiàng)名稱，然后改一下添加篩選那個(gè)事件，將名和對(duì)應(yīng)列的列表改一下就可以了，因?yàn)榍懊嬷饕慕换ヒ呀?jīng)寫好了，所以就很簡(jiǎn)單了。

這樣我們就完成了用多選下拉列表篩選中繼器表格的原型模板了，再次使用時(shí)，基本上就是在中繼器內(nèi)導(dǎo)入對(duì)應(yīng)的表格內(nèi)容和選項(xiàng)內(nèi)容，既可以自動(dòng)生成多條件的多選篩選效果，是不是很方便呢？

那以上就是本期的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見~

作者：做產(chǎn)品但不是經(jīng)理；微信公眾號(hào)：Axure高保真原型；

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。