樹形表格常用于處理有結(jié)構(gòu)性的表格數(shù)據(jù)，例如像分行支行有明顯上下級別的數(shù)據(jù)，就比較適合用樹形表格的方式查看。本文作者分享了如何在Axure中制作一個多選樹形表格的原型模板，一起來看一下吧。

樹形表格常用于處理有結(jié)構(gòu)性的表格數(shù)據(jù)，例如像分行支行有明顯上下級別的數(shù)據(jù)，就比較適合用樹形表格的方式查看，可以直接查看分行數(shù)據(jù)，也可以打開對應(yīng)分行，下鉆查看支行的數(shù)據(jù)。

今天作者就教大家如何在Axure中制作一個多選樹形表格的原型模板。

一、效果展示

1. 點擊表格左側(cè)箭頭，可以展開或者收起該行內(nèi)容的子級內(nèi)容
2. 點擊父級行的多選按鈕，可以選中或者取消選中當前行內(nèi)容以及子級行內(nèi)容
3. 點擊子級行的多選按鈕，可以選中或取消選中當前行的內(nèi)容，并且根據(jù)子級選中的數(shù)量自動反選父級行。

二、制作教程

1. 材料準備

制作材料包括中繼器、多選按鈕、箭頭形狀、矩形、文本標簽。

1）表頭

表頭我們用幾個矩形來制作即可，表格有多少列就用多少個矩形拼接。

2）表格內(nèi)容

表格內(nèi)容我們用中繼器制作，內(nèi)容包括箭頭形狀、多選按鈕、矩形和文字標簽，如下圖所示擺放：

多選按鈕——這里我們的多選按鈕不是用自帶的多選按鈕，因為自帶的多選按鈕只有2中狀態(tài)（已選和未選），我們需要用三種狀態(tài)（已選、半選、未選），所以我們需要自制多選按鈕，我們用動態(tài)面板制作即可，在三個state里面分別放入已選、半選、未選的圖片或者形狀即可。

背景矩形——我們用背景矩形包裹住整行的內(nèi)容，至于底層，需要增加一個選中樣式（淺灰）和禁用演示（淺藍），選中樣式用于和一級行區(qū)分，禁用演示是后續(xù)制作鼠標移入行時變藍的效果

中繼器表格——表格里需要文字列和功能列，文字列就是column1~6分別對應(yīng)表格1-6列顯示的內(nèi)容，功能列包括：shangyiji列，用于記錄該子級的父級，這里需要和column1的父級對應(yīng)；jiantou列，用于控制是否顯示箭頭，父級行填寫1，子級行或者沒有子級的父級行不需要填寫；fangxiang列用于控制箭頭方向，如果箭頭默認都是向右的，不填就可以了，如果向下就填1；xianshi列，控制那行內(nèi)容顯示出來，一般父級內(nèi)容默認顯示填寫1，子級默認隱藏就為空，當然子級也可以默認顯示，這里要配合箭頭方向填寫默認值即可，例如子級默認顯示，父級箭頭對應(yīng)應(yīng)該默認向下打開，填寫1；xuanzhong列，用于該行是否被選中，默認為空即可，代表未選中，也可填寫全選或者半選，后續(xù)會通過交互設(shè)置選中按鈕到對應(yīng)的狀態(tài)。

2. 設(shè)置交互

1）中繼器每項加載時交互

我們用設(shè)置文本的交互，把中繼器column1~6里面的值，設(shè)置到中繼器表格里對應(yīng)的矩形內(nèi)。

如果jiantou列的值不等于1，那我們就用顯示隱藏的交互，把箭頭隱藏起來即可；

如果fangxiang列的值等于1，這代表箭頭應(yīng)該向下，所以我們用旋轉(zhuǎn)的交互，將箭頭旋轉(zhuǎn)到向下；

如果xianshi列的值不等于，代表該行數(shù)據(jù)被收起，暫不顯示，所以我們用隱藏的交互將該行數(shù)據(jù)影藏起來；

如果shangyiji列的值不等于空，就代表該行是子級行，有對應(yīng)父級。所以我們用選中的交互，選中背景矩形，因為前面設(shè)置了交互樣式，所以這樣子級行就會變成灰色和負極行區(qū)分開。

如果xuanzhong列的值為全選，代表選中按鈕被選中，我們用設(shè)置面板狀態(tài)的交互，將他設(shè)置到全選的狀態(tài)；xuanzhong列的值為半選，代表子級有選中的，但是不是全部子級都選中，所以我們用設(shè)置面板狀態(tài)的交互，將他設(shè)置到半選的狀態(tài)

2）鼠標移入中繼器內(nèi)行組合時

我們用禁用的交互，將背景矩形禁用，這樣就會有移入變藍的效果；

3）鼠標移出中繼器內(nèi)行組合時

我們用啟用的交互，將背景矩形啟用；

4）鼠標單擊箭頭時

我們要根據(jù)箭頭的方向來判斷，我們可以根據(jù)fangxiang列的值判斷箭頭的方向。

如果箭頭是向下的，那我們就要讓箭頭向右，并且把子級行收起，這里我們用更新行的交互，將當前行方向列的值設(shè)置為0，然后在用更新行的交互，把shangyiji列里內(nèi)容為當前行內(nèi)容的行找出來，更新目標行xianshi列的值為0。

相反，如果箭頭是向右的，那我們就要讓箭頭向下，并且把子級行展開，這里我們用更新行的交互，將當前行方向列的值設(shè)置為1，然后在用更新行的交互，把shangyiji列里內(nèi)容為當前行內(nèi)容的行找出來，更新目標行xianshi列的值為1。

5）鼠標點擊未選按鈕時

如果點擊的是父級行，就是沒有上一級，就相當于是從未選中變成選中，同時，我們要把該行對應(yīng)的子級行選中。所以我們用更新行的交互，更新當前行xuanzhong列的值為全選，在更新子級行shangyiji列的值等于該行的值的行，把xuanzhong列的值更新為全選。

如果點擊的是子級行，我們就用更新行內(nèi)容將當前行xuanzhong列的值更新為全選，然后我們還需要做一個判斷，判斷是不是所有父級的子級都被選中，這里涉及到一個設(shè)計選中數(shù)的邏輯交互，就是我們需要新建一個記錄文本，記錄選中的數(shù)，中繼器開始加載時設(shè)置為0，然后每有一行的值為全選，我們就在原來基礎(chǔ)上+1，這樣就可以判斷選中數(shù)了。所以我們先篩出和當前行同一個父級的子級，然后在判斷選中數(shù)。

那如果記錄選中數(shù)和中繼器表格看到的行數(shù)一樣，就代表全部的子級都被選中，我們用更新行的交互，更新對應(yīng)的父級行xuanzhong列的值為全選；

如果記錄選中數(shù)和中繼器表格看到的行數(shù)不一樣，并且記錄數(shù)大于1，代表有部分子級被選中，我們用更新行的交互，更新對應(yīng)父級行xuanzhong列的值為半選；

如果記錄數(shù)等于0，就是一行都沒有被選中，我們用更新行的交互，更新對應(yīng)的父級行xuanzhong列的值為未選；當然在選中時不會出現(xiàn)該情況，但是在后面取消選中的時候會，所以我們寫好這個交互，后續(xù)直接觸發(fā)就可以了；

最后我們移除對中繼器的篩選：

6）鼠標點擊半選按鈕時

這里和上面思路基本一致，但是比上面要簡單，因為半選按鈕只有父級行才會出現(xiàn)，所以理論上我們不需要判斷是否為負極，我們直接用更新行的交互，更新當前行xuanzhong列的值為全選，在更新子級行shangyiji列的值等于該行的值的行，把xuanzhong列的值更新為全選。

當然了，如果你懶的話，也可以直接復(fù)制鼠標單擊未選按鈕時的交互，復(fù)制過來，也可以通用。

7）鼠標點擊全選按鈕時

這里代表我們要從選中變成未選中，這里同樣要分父級行和子級行進行判斷，也是通過判斷shangyiji的值是否為空，如果為空，就代表沒有父級，那他就是父級。這是我們要用更新行的交互，講當前行xuanzhong列的值設(shè)置為未選，同時將該行子級行xuanzhong列的值也設(shè)置為未選狀態(tài)。

如果點擊的是子級行，我們先用更新行的交互，將該行xuanzhogn列的值設(shè)置為未選。然后在判斷對應(yīng)父級行是半選狀態(tài)還是未選狀態(tài)，這里和上面鼠標單擊未選按鈕的思路是一樣的，都是先篩選出和該行相同父級的子級，然后通過記錄數(shù)和表格可視行數(shù)的關(guān)系，對負級行進行一個反選的操作。

這樣我們就制作完成了多選樹形表格的原型模板了，下次使用時，只需要在中繼器表格里填寫對應(yīng)信息，預(yù)覽是即可自動生成交互效果，包括樹形展開或折疊，選中、全選、取消選中或全部取消、移入行高亮顯示……

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