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

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

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

一、效果展示

1、展開和折疊，點擊箭頭可以展開會折疊該父級的子級內容（該部門的員工）

2、選中和取消選中，點擊可以切換該內容選中或者取消選中

3、反選效果，點擊父級（部門）可以選中或者取消選中該父級（部門）和對應子級（員工），點擊子級（員工），會根據該父級（部門）下全部的子級（員工）選中情況反選父級（部門），分為未選、半選和全選三個狀態

4、生成標簽，根據選中的子級（員工）會在右側已選項生成對應的標簽，并統計已選中的子級（員工）數。

5、刪除標簽，點擊標簽按鈕，可以刪除該標簽，并取消對應子級（員工）的選中，點擊清空按鈕，可以刪除全部標簽，并取消全部選中

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

二、制作教程

1. 左側多選樹制作

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

• 箭頭，默認方向向右即可，后續可以通過旋轉交互轉向
• 多選框，包含全選、半選、未選三個狀態，放在動態面板3個狀態頁里，默認顯示未選狀態
• 矩形，用做背景矩形，默認透明，設置禁用樣式為淺藍色，這里主要是做一個移入變色效果，你們可以用懸停樣式或者選中樣式，如果是用禁用樣式變色的話，鼠標移入組合時，我們用禁用的交互禁用該矩形，鼠標移出組合時我們用啟用的交互將她啟用

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

Column1：填寫該行文本標簽顯示的內容，中繼器每項加載時，用設置文本的交互，將該列的值設置到文本標簽里即可。

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

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

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

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

xuanzhong：該列用于控制選中狀態，如果值等于全選，就設置面板狀態顯示全選，如果等于半選就設置面板狀態顯示半選

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

接下來我們要通過交互實現反選，未選按鈕鼠標單擊時，我們根據情況來判斷：

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

如果點擊的是子級，首先我們要用更新行的交互，將當前行xuanzhong列設置為選中。然后我們要反選父級，那這里反選涉及到要統計該父級里面有多少個子級已被選中的問題。所以我們先用篩選的交互，將同一個父級的子級篩選出來

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

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

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

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

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

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

鼠標單擊半選按鈕時，其實就是只有父級才有半選按鈕，我們設置他和對應的子級為全選即可。這里呢其實和上面未選的交互可以用一模一樣的，所以為了快捷，我們就直接復制即可。

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

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

如果點擊的是子級，首先我們要用更新行的交互，將當前行xuanzhong列設置為未選。然后我們要反選父級，那這里反選同樣涉及到要統計該父級里面有多少個子級已被選中的問題。所以我們也是先用篩選的交互，將同一個父級的子級篩選出來

然后在根據選中數來判斷到未選還是半選，因為上面我們做判斷全選的時候已經寫好了判斷未選和半選的條件，所以我們這里直接觸發就可以了。這里左邊數的功能基本就完成了。

2. 右側已選標簽的制作

右側標簽我們也是用中繼器來制作，里面包含圓角矩形和關閉按鈕，如下如所示擺放

中繼器表格為Column0和shagnyiji（姓名和部門），因為是未選的部分，所以默認為即可，如果需要默認選中人選，后續會在左側樹的中繼器里選中，自動聯動過來右側中繼器

中繼器每項加載時，我們設置文本的交互，將Column0和shagnyiji（姓名和部門）設置到標簽矩形里即可。

然后我們在外面增加一個已選的文本標簽，在中繼器加載到最后一行時，我們用設置文本的交互，將中繼器的項目數設置到已選的文本標簽里，中繼器的項目數我們可以用dataCount函數獲取

然后我們增加一個清空按鈕，右側標簽基本上就完成了。

3. 聯動交互

我們主要通過左側樹來控制右側的標簽

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

因為我們只傳遞子級員工的值，所以如果是子級，并且已選中，我們就用添加行的交互，將該行的員工和部門對應的值添加到右側中繼器里。

右側標簽關閉按鈕點擊時，我們用更新行的交互，更新左側多選樹中繼器里對應行的選中狀態為未選，這里我們隨意輸入即可，因為只要不是已選和半選，其他文字內容都是顯示未選狀態。

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

最后是清空按鈕鼠標單擊時，這里我們只需要用更新行的交互，將左側多選樹中繼器里所有行選中的值設置為未選即可，案例中寫0，因為只要不是已選和半選，其他文字內容都是顯示未選狀態，所以隨意輸入了一個0，你們也可以填寫未選的文字。

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

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。