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

編輯導(dǎo)語：本文作者分享了用中繼器制作標(biāo)簽分類篩選的方法，最終的效果是，選中標(biāo)簽后，會(huì)在表格中顯示對(duì)應(yīng)的數(shù)據(jù)行，隱藏標(biāo)簽后會(huì)隱藏對(duì)應(yīng)的數(shù)據(jù)行。具體怎么做？一起來看一下吧。

今天教大家用中繼器制作一個(gè)標(biāo)簽分類篩選的原型模板，選中標(biāo)簽后，會(huì)在表格中顯示對(duì)應(yīng)的數(shù)據(jù)行，隱藏標(biāo)簽后會(huì)隱藏對(duì)應(yīng)的數(shù)據(jù)行。本教程包括多種類型的聯(lián)合篩選的效果，如下圖所示：

原型地址：https://bwhhya.axshare.com/#g=1

標(biāo)簽和表格我們都是用中繼器制作的，所以制作完成之后，我們只需要在中繼器表格中填寫對(duì)應(yīng)的內(nèi)容，即可自動(dòng)生成交互效果，復(fù)用下極強(qiáng)，下面我們就一起來學(xué)習(xí)制作吧~

一、表格的制作

表格分成兩部分，表頭和表格內(nèi)容。

表頭我們每一個(gè)用矩形制作，案例中有6格所以就用6個(gè)矩形制作，增加藍(lán)黑色的填充顏色，白色文字，填寫好每一列的表頭文字。

表格內(nèi)容我們用中繼器制作，在中繼器里面我們放入6個(gè)矩形，每一個(gè)矩形的寬度和位置要和表頭一一對(duì)應(yīng)。

中繼器表格里需要有6列，分別對(duì)應(yīng)中繼器里6個(gè)矩形的文本，我們把所需數(shù)據(jù)填寫在中繼器表格內(nèi)，如下圖所示：

中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，把中繼器表格的內(nèi)容，設(shè)置到中繼器里面的矩形

這樣我們就完成了中繼器表格的基礎(chǔ)設(shè)置了，后續(xù)需要其他效果例如增刪改查排序等，都可以自行增加。

二、標(biāo)簽的制作

我們新建一個(gè)中繼器，設(shè)置中繼器里面默認(rèn)的矩形樣式，設(shè)置邊線顏色、填充顏色、文字顏色、圓角，以及選中樣式，案例中第一個(gè)標(biāo)簽組，未選中時(shí)文字是黑色，邊線、填充顏色和文字都是白色；選中時(shí)的文字顏色為紅色，邊線顏色為紅色，填充顏色為淺紅色。具體的樣式可以根據(jù)自身需要設(shè)置，這里就不過多展開了。

中繼器表格中，我們需要有兩列：

column0——中繼器自帶的列，默認(rèn)自帶設(shè)置文本到矩形的交互，這些都不需要修改，我們?cè)诶锩嫣顚憯?shù)據(jù)即可，案例中該組標(biāo)簽為人名，所以我們可以在中繼器表格里直接復(fù)制第二列的數(shù)據(jù)。

xuanzhong——用來控制標(biāo)簽的樣式，如果值為1就是選中樣式，如果不等于1就是不選中。案例中默認(rèn)都是選中的所以全部填寫1。

中繼器每項(xiàng)加載時(shí)，里面原有的交互就會(huì)把column0的文本設(shè)置都標(biāo)簽矩形，所以這里我們不需要修改

我們還需要增加一個(gè)空白文本，命名為篩選文本1，默認(rèn)隱藏，只用于制作后面的篩選事件，中繼器加載時(shí)，我們?cè)黾訔l件，如果在第一行加載的開始，我們用設(shè)置文本的交互，將篩選文本1的值設(shè)置為空值

如果xuanzhong列的值為真，我們就用設(shè)置選中的交互，將該行的標(biāo)簽選中，并且用設(shè)置文本的交互，將標(biāo)簽文本記錄在篩選文本1里面。

如果加載到最后一行的時(shí)候，我們用觸發(fā)事件，觸發(fā)篩選文本1鼠標(biāo)單擊時(shí)的交互。這里其實(shí)就是觸發(fā)對(duì)內(nèi)容表格的一個(gè)篩選，篩選條件為，中繼器表格第二列（員工姓名）里的每一行的內(nèi)容，是否包含在篩選文本1里，我們要篩選出包含在里面的行。

這里我們需要用到indexof函數(shù)，篩選文本1.indexOf(Item.Column2)，如果得到的值大于-1，代表該行的人名在篩選文本1里面，如果小于等于-1，就代表該行的人名不包含在篩選文本1里面，我們的條件就是要大于-1。

鼠標(biāo)單擊標(biāo)簽時(shí)，我們通過控制中繼器里xuanzhong列的值來控制標(biāo)簽是否被選中，如果標(biāo)簽沒有別選中，就是itemxuanzhong!=1時(shí)，我們用更新行的交互，將中繼器里當(dāng)前行選中列的值更新為1；那如果標(biāo)簽本身就選中了，就是itemxuanzhong==1時(shí)，我們用更新行的交互，將中繼器里當(dāng)前行選中列的值更新為0。

這樣我們就實(shí)現(xiàn)了單組標(biāo)簽對(duì)表格的篩選了。

三、復(fù)制多個(gè)標(biāo)簽組合

如果需要多個(gè)標(biāo)簽組合的篩選，那我們可以簡單的復(fù)制標(biāo)簽中繼器和篩選文本，在中繼器表格里填入對(duì)應(yīng)的內(nèi)容，例如上面標(biāo)簽中繼器里column0里填寫的是人名，現(xiàn)在我們就換成職位，將數(shù)據(jù)填寫進(jìn)去后，刪除多余的行。

然后我們?cè)俑囊幌潞Y選條件，前面是對(duì)Column2（人名列）進(jìn)行篩選，這里就要改成對(duì)Column3（職位列）進(jìn)行篩選。這里還需要注意的是，如果是多個(gè)條件的篩選，我們要給該每一個(gè)篩選時(shí)間命名，每個(gè)篩選命名不同一樣，例如前面按人名篩選命名為篩選1，并且取消勾選移除其他篩選；這里按職位是啊選就命名為是篩選2，并且取消勾選移除其他篩選。如果沒有取消勾選或者單獨(dú)命名，就會(huì)影響到聯(lián)合篩選。

同樣的道理，我們制作完第二組標(biāo)簽組，后續(xù)需要增加標(biāo)簽組都是用同樣的方式。

這樣我們就完成標(biāo)簽分類篩選中繼器表格原型模板的制作了，以后使用時(shí)只需要在中繼器表格里填寫內(nèi)容，就可自動(dòng)生成能通過標(biāo)簽來篩選的中繼器表格，是不是很方便呢？

那以上就是用中繼器制作標(biāo)簽分類篩選表格原型模板的全部內(nèi)容了，感謝您的閱讀，我們下期見。

本文由 @Axure高保真原型 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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