本次教程是對(duì)Axure中繼器的深化學(xué)習(xí)，之前發(fā)布過通過中繼器實(shí)現(xiàn)模塊排序的功能，本次教程是利用中繼器實(shí)現(xiàn)篩選和新增。

一、特別提醒

考慮到網(wǎng)上Axure RP 9 教程極少的情況，今后文章名稱統(tǒng)一改為Axure RP 9 教程，一來明確自己的定位，二來提高搜索的精準(zhǔn)度。本次教程是對(duì)Axure中繼器的深化學(xué)習(xí)，之前發(fā)布過通過中繼器實(shí)現(xiàn)模塊排序的功能，本次教程是利用中繼器實(shí)現(xiàn)篩選和新增。

二、效果圖

根據(jù)所選項(xiàng)篩選出符合條件的角色，例如選擇性別女，篩選出性別為女的角色。

添加一個(gè)新的角色，輸入角色的字段信息，將角色添加進(jìn)中繼器的數(shù)據(jù)集內(nèi)。

三、往期回顧

根據(jù)所選字段篩選出符合條件的結(jié)果：

新增角色：

四、實(shí)現(xiàn)邏輯

首先，介紹一下中繼器。

簡(jiǎn)單說：中繼器是一個(gè)數(shù)據(jù)集，里面可以導(dǎo)入數(shù)據(jù)和圖像，新增行、刪除行、進(jìn)行排序和篩選數(shù)據(jù)，中繼器通常更多的出現(xiàn)在高級(jí)交互中。《Axure教程—中繼器實(shí)現(xiàn)模塊排序》（文章在歷史教程中可見）一文中，講述了中繼器的排序功能，可以根據(jù)我們選擇的字段對(duì)模塊進(jìn)行排序。本期講的是利用中繼器實(shí)現(xiàn)篩選功能和增加新數(shù)據(jù)的功能。

篩選功能和排序功能類似，都是設(shè)置數(shù)據(jù)集，實(shí)現(xiàn)篩選或者排序。

新增功能相對(duì)來說復(fù)雜一丟丟，但本質(zhì)上其實(shí)就是將所輸入的數(shù)據(jù)賦值到中繼器中即可。

好，那么接下來從教程中學(xué)習(xí)到底如何實(shí)現(xiàn)上述功能。

五、原型回顧

本次教程是在之前中繼器教程的基礎(chǔ)上做了優(yōu)化，因此，我們先來回顧一下原型，回憶一波中繼器內(nèi)字段名稱。下圖是中繼器內(nèi)數(shù)據(jù)的字段名稱：

OK！接下來開始講篩選和新增！

六、操作步驟—篩選

我們以選擇性別為例講述操作步驟。

Step one

創(chuàng)建一個(gè)Droplist，命名為“Droplist 性別”，為Droplist添加四個(gè)選項(xiàng)，分別為 性別、女、男、未知?！靶詣e”代表初始默認(rèn)狀態(tài)，“未知”代表奇奇怪怪的角色性別，男和女就不多做解釋。

Step two

為Droplist 性別 設(shè)置交互，選項(xiàng)改變時(shí)，如果選中項(xiàng)為男，為中繼器新增過濾器，規(guī)則為[[item.Sex==’女’]]，這樣，在選中性別為女時(shí)，中繼器就會(huì)自動(dòng)篩選出性別為女的角色。需要注意的是，item.Sex代表的是中繼器中數(shù)據(jù)集列名，’女’代表的是變量。這樣，就實(shí)現(xiàn)了選中性別為女時(shí)篩選出對(duì)應(yīng)的角色。

Step three

接下來，繼續(xù)設(shè)置if選中項(xiàng)為男，新增過濾器，if選中項(xiàng)為未知，新增過濾器……

Step four

最后，if選中項(xiàng)為性別，移除中繼器的過濾器。

ok，附上交互設(shè)置截圖：

Step five

接下來以同樣的方式設(shè)置其他的中繼器數(shù)據(jù)集列的篩選即可。

七、操作步驟—新增

Step one

我們先明確添加角色時(shí)需要的字段，包括：名稱、性別、位置、評(píng)分、攻擊距離、攻擊力、防御力；明確他們的輸入類型，名稱項(xiàng)為文本，性別和位置為可選項(xiàng)，評(píng)分、攻擊距離、攻擊力和防御力輸入類型為Number。

Step two

制作一個(gè)新增角色選框，在里面添加所需要輸入的字段輸入框或下拉列表，取好名稱，將他們打組方便管理（這里我命名方式為“添加XX”，XX為輸入字段的名稱，如輸入姓名的文本框命名為“添加名稱”）。增加btn添加和btn取消用于控制是否添加角色，ok，準(zhǔn)備工作就緒，接下來就是設(shè)置如何新增了。

Step three

為添加按鈕增加交互，鼠標(biāo)單擊時(shí)，為中繼器新增行，點(diǎn)擊新增行，在彈出的數(shù)據(jù)集中設(shè)置函數(shù)，本案例中，名稱列，即Name列設(shè)置為A，同時(shí)為A設(shè)置局部變量為“元件文字=添加名稱”；同樣，Sex列，即性別列，設(shè)置為B，B的局部變量為“元件文字=添加性別”；這樣，將所需的7個(gè)字段一一對(duì)應(yīng)設(shè)置，這樣，就實(shí)現(xiàn)了新增一行數(shù)據(jù)的功能。

交互如下圖：

Step four

添加一些用于完善的交互，在點(diǎn)擊添加之后，隱藏新增模塊，同時(shí)讓所有輸入框和下拉列表框都設(shè)置為默認(rèn)值，這樣，我們就可以重復(fù)多次添加角色了。

總結(jié)

本次的教程中并不包含太多的交互邏輯，實(shí)現(xiàn)方法其實(shí)也就是考驗(yàn)對(duì)中繼器的熟悉程度。

好，最后附上下載鏈接：https://pan.baidu.com/s/11sQZ6l8-Iy5PP6bUIUqVOA

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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