中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

一、材料準備

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

1. 中繼器

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

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

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

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

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

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

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

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

2. 多選下拉列表

多選下拉列表的話，我是用中繼器版的多選下拉列表，你們也可以直接用Axure9里面Sample ui patterns里面的多選。不過系統(tǒng)自帶的不是用中繼器制作的，所以復(fù)用性會差一點，因為他里面只有5個選項，如果增加選項的話就要增加多選按鈕的元件和對應(yīng)的交互，其實就相當(dāng)于寫死，會比較麻煩。

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

1）篩選原理

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

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

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

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

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

第一個點：如果是多條件篩選，我們就要取消勾選移除其他篩選，并且給該篩選命名，案例中第一個是對職位的篩選，因為職位是第三列，所以我們命名為篩選3。

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

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

這樣一個多選列表對中繼器表格某一列的篩選就完成了，如果要用多個多選下拉列表對中繼器表格多列進行篩選的話也很簡單，我們把多選下拉列表和對應(yīng)的文本標簽復(fù)制一下，修改下拉列表里的選項名稱，然后改一下添加篩選那個事件，將名和對應(yīng)列的列表改一下就可以了，因為前面主要的交互已經(jīng)寫好了，所以就很簡單了。

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

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

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

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

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