多選樹在有分層的領(lǐng)域是經(jīng)常用到的，但有些同學(xué)還是不太熟練。本文作者以不同部門之間挑選員工位案例為例，分析如何在Axure中制作多選樹穿梭選擇器的原型模板，一起來看看吧。

多選樹在有分層的領(lǐng)域是經(jīng)常用到的，例如不同城市下的門店、不同部門的員工等等，用多選樹就可以讓我們在不同層級(jí)快速挑選到對應(yīng)的對象。

今天作者就教大家在Axure中如何制作多選樹穿梭選擇器的原型模板，我們會(huì)以不同部門之間挑選員工位案例。

一、效果展示

1、展開和折疊，點(diǎn)擊箭頭可以展開會(huì)折疊該父級(jí)的子級(jí)內(nèi)容（該部門的員工）

2、選中和取消選中，點(diǎn)擊可以切換該內(nèi)容選中或者取消選中

3、反選效果，點(diǎn)擊父級(jí)（部門）可以選中或者取消選中該父級(jí)（部門）和對應(yīng)子級(jí)（員工），點(diǎn)擊子級(jí)（員工），會(huì)根據(jù)該父級(jí)（部門）下全部的子級(jí)（員工）選中情況反選父級(jí)（部門），分為未選、半選和全選三個(gè)狀態(tài)

4、生成標(biāo)簽，根據(jù)選中的子級(jí)（員工）會(huì)在右側(cè)已選項(xiàng)生成對應(yīng)的標(biāo)簽，并統(tǒng)計(jì)已選中的子級(jí)（員工）數(shù)。

5、刪除標(biāo)簽，點(diǎn)擊標(biāo)簽按鈕，可以刪除該標(biāo)簽，并取消對應(yīng)子級(jí)（員工）的選中，點(diǎn)擊清空按鈕，可以刪除全部標(biāo)簽，并取消全部選中

二、制作教程

1. 左側(cè)多選樹制作

我們主要用中繼器來制作，中繼器里面，我們用到的元件包括箭頭，多選框（全選、半選、未選）、文本標(biāo)簽、矩形，如下圖所示擺放

• 箭頭，默認(rèn)方向向右即可，后續(xù)可以通過旋轉(zhuǎn)交互轉(zhuǎn)向
• 多選框，包含全選、半選、未選三個(gè)狀態(tài)，放在動(dòng)態(tài)面板3個(gè)狀態(tài)頁里，默認(rèn)顯示未選狀態(tài)
• 矩形，用做背景矩形，默認(rèn)透明，設(shè)置禁用樣式為淺藍(lán)色，這里主要是做一個(gè)移入變色效果，你們可以用懸停樣式或者選中樣式，如果是用禁用樣式變色的話，鼠標(biāo)移入組合時(shí)，我們用禁用的交互禁用該矩形，鼠標(biāo)移出組合時(shí)我們用啟用的交互將她啟用

中繼器表格我們增加一下幾列：

Column1：填寫該行文本標(biāo)簽顯示的內(nèi)容，中繼器每項(xiàng)加載時(shí)，用設(shè)置文本的交互，將該列的值設(shè)置到文本標(biāo)簽里即可。

shangyiji：填寫該行內(nèi)容的上一級(jí)，如果是父級(jí)（例如總裁辦）就不需要填寫，如果是子級(jí)（例如張三）就需要填寫。另外，我們增加移動(dòng)的交互，如果是子級(jí)，就是上一級(jí)內(nèi)容不為空，那我們件該組合向右移動(dòng)10個(gè)單位，這樣我們自己也容易區(qū)分父級(jí)和子級(jí)

jiantou：控制是否顯示箭頭，如果是父級(jí)填寫1，如果是子級(jí)就不用填寫。我們通過jiantou列的值來判斷，如果值不等于1，就用隱藏的交互，將箭頭顯示，否則就默認(rèn)顯示

fangxiang：用于控制箭頭的方向，如果值等于1，我們就用選中的交互，將箭頭轉(zhuǎn)向下。

xianshi：用于控制該行的內(nèi)容是否顯示出來，如果值等于1，就顯示，否則就隱藏

xuanzhong：該列用于控制選中狀態(tài)，如果值等于全選，就設(shè)置面板狀態(tài)顯示全選，如果等于半選就設(shè)置面板狀態(tài)顯示半選

這樣我們基本就可以通過值來控制，這顆樹了，默認(rèn)需要展開還是折疊，默認(rèn)是選中還是未選中，都可以通過填寫中繼器來控制。

接下來我們要通過交互實(shí)現(xiàn)反選，未選按鈕鼠標(biāo)單擊時(shí)，我們根據(jù)情況來判斷：

如果點(diǎn)擊的是父級(jí)按鈕，我們可以通過shangyiji的值判斷，如果shangyiji的值為空，那他就是父級(jí)，那我們用更新行交互，首先將當(dāng)前行xuanzhong列設(shè)置為選中，然后將該父級(jí)的子級(jí)的xuanzhong列的值設(shè)置為選中。

如果點(diǎn)擊的是子級(jí)，首先我們要用更新行的交互，將當(dāng)前行xuanzhong列設(shè)置為選中。然后我們要反選父級(jí)，那這里反選涉及到要統(tǒng)計(jì)該父級(jí)里面有多少個(gè)子級(jí)已被選中的問題。所以我們先用篩選的交互，將同一個(gè)父級(jí)的子級(jí)篩選出來

然后我們要增加一個(gè)文本標(biāo)簽，用于記錄選中數(shù)，默認(rèn)隱藏即可。在中繼器加載第一行一開始，我們用設(shè)置文本的交互，將它的值設(shè)置為0。

如果xuanzhong列的值為全選，就是選中了，那我們用用設(shè)置文本的交互，將記錄數(shù)+1，這樣就可以記錄，有多少行被選中了

如果記錄選中數(shù)==中繼器可視行數(shù)，那代表子級(jí)被全選了，這里我們用更新行的交互，將父級(jí)行選中列的值設(shè)置為全選即可；

如果記錄選中數(shù)不等于中繼器可視行數(shù)，那我們就要判斷記錄選中數(shù)，如果記錄選中數(shù)大于等于1，相當(dāng)于選了，但是沒全選，我們用更新行的交互，將父級(jí)行選中列的值設(shè)置為半選即可；

如果記錄選中數(shù)不等于中繼器可視行數(shù)，并且記錄的選中數(shù)等于0，就是子級(jí)一個(gè)都沒有選，我們用更新行的交互，將父級(jí)行選中列的值設(shè)置為未選即可；雖然從未選到已選，不會(huì)用到這個(gè)條件，不過后面從已選到未選會(huì)用到，所以我們直接根據(jù)邏輯寫完，后續(xù)我們自己也方便。

完成反選后，我們移除篩選就可以了

鼠標(biāo)單擊半選按鈕時(shí)，其實(shí)就是只有父級(jí)才有半選按鈕，我們設(shè)置他和對應(yīng)的子級(jí)為全選即可。這里呢其實(shí)和上面未選的交互可以用一模一樣的，所以為了快捷，我們就直接復(fù)制即可。

鼠標(biāo)單擊全選按鈕時(shí)，這里和上面選擇的邏輯也是一樣的，就是操作是相反的

如果點(diǎn)擊的是父級(jí)按鈕，我們可以通過shangyiji的值判斷，如果shangyiji的值為空，那他就是父級(jí)，那我們用更新行交互，首先將當(dāng)前行xuanzhong列設(shè)置為未選，然后將該父級(jí)的子級(jí)的xuanzhong列的值設(shè)置為未選。

如果點(diǎn)擊的是子級(jí)，首先我們要用更新行的交互，將當(dāng)前行xuanzhong列設(shè)置為未選。然后我們要反選父級(jí)，那這里反選同樣涉及到要統(tǒng)計(jì)該父級(jí)里面有多少個(gè)子級(jí)已被選中的問題。所以我們也是先用篩選的交互，將同一個(gè)父級(jí)的子級(jí)篩選出來

然后在根據(jù)選中數(shù)來判斷到未選還是半選，因?yàn)樯厦嫖覀冏雠袛嗳x的時(shí)候已經(jīng)寫好了判斷未選和半選的條件，所以我們這里直接觸發(fā)就可以了。這里左邊數(shù)的功能基本就完成了。

2. 右側(cè)已選標(biāo)簽的制作

右側(cè)標(biāo)簽我們也是用中繼器來制作，里面包含圓角矩形和關(guān)閉按鈕，如下如所示擺放

中繼器表格為Column0和shagnyiji（姓名和部門），因?yàn)槭俏催x的部分，所以默認(rèn)為即可，如果需要默認(rèn)選中人選，后續(xù)會(huì)在左側(cè)樹的中繼器里選中，自動(dòng)聯(lián)動(dòng)過來右側(cè)中繼器

中繼器每項(xiàng)加載時(shí)，我們設(shè)置文本的交互，將Column0和shagnyiji（姓名和部門）設(shè)置到標(biāo)簽矩形里即可。

然后我們在外面增加一個(gè)已選的文本標(biāo)簽，在中繼器加載到最后一行時(shí)，我們用設(shè)置文本的交互，將中繼器的項(xiàng)目數(shù)設(shè)置到已選的文本標(biāo)簽里，中繼器的項(xiàng)目數(shù)我們可以用dataCount函數(shù)獲取

然后我們增加一個(gè)清空按鈕，右側(cè)標(biāo)簽基本上就完成了。

3. 聯(lián)動(dòng)交互

我們主要通過左側(cè)樹來控制右側(cè)的標(biāo)簽

所以在左側(cè)樹的中繼器剛開始加載時(shí)，我們要做一個(gè)重置的交互，將右側(cè)中繼器里所有行先刪除

因?yàn)槲覀冎粋鬟f子級(jí)員工的值，所以如果是子級(jí)，并且已選中，我們就用添加行的交互，將該行的員工和部門對應(yīng)的值添加到右側(cè)中繼器里。

右側(cè)標(biāo)簽關(guān)閉按鈕點(diǎn)擊時(shí)，我們用更新行的交互，更新左側(cè)多選樹中繼器里對應(yīng)行的選中狀態(tài)為未選，這里我們隨意輸入即可，因?yàn)橹灰皇且堰x和半選，其他文字內(nèi)容都是顯示未選狀態(tài)。

完成之后我們同樣遇到反選的問題，同樣的我們和之前一樣，先將同一個(gè)父級(jí)的內(nèi)容篩選出來，然后根據(jù)記錄的選中數(shù)來判斷父級(jí)是未選還是半選，這個(gè)在前面記錄選中數(shù)那有詳細(xì)的講解，我們直接觸發(fā)他即可。

最后是清空按鈕鼠標(biāo)單擊時(shí)，這里我們只需要用更新行的交互，將左側(cè)多選樹中繼器里所有行選中的值設(shè)置為未選即可，案例中寫0，因?yàn)橹灰皇且堰x和半選，其他文字內(nèi)容都是顯示未選狀態(tài)，所以隨意輸入了一個(gè)0，你們也可以填寫未選的文字。

這樣我們就完成了多選樹穿梭選擇器的制作了，下次使用也很方便，我們只需要在中繼器表格里填寫內(nèi)容，即可自動(dòng)生成交互效果。

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。