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

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

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

一、效果展示

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

二、制作教程

1. 材料準(zhǔn)備

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

1）表頭

表頭我們用幾個(gè)矩形來(lái)制作即可，表格有多少列就用多少個(gè)矩形拼接。

2）表格內(nèi)容

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

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

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

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

2. 設(shè)置交互

1）中繼器每項(xiàng)加載時(shí)交互

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

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

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

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

如果shangyiji列的值不等于空，就代表該行是子級(jí)行，有對(duì)應(yīng)父級(jí)。所以我們用選中的交互，選中背景矩形，因?yàn)榍懊嬖O(shè)置了交互樣式，所以這樣子級(jí)行就會(huì)變成灰色和負(fù)極行區(qū)分開(kāi)。

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

2）鼠標(biāo)移入中繼器內(nèi)行組合時(shí)

我們用禁用的交互，將背景矩形禁用，這樣就會(huì)有移入變藍(lán)的效果；

3）鼠標(biāo)移出中繼器內(nèi)行組合時(shí)

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

4）鼠標(biāo)單擊箭頭時(shí)

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

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

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

5）鼠標(biāo)點(diǎn)擊未選按鈕時(shí)

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

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

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

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

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

最后我們移除對(duì)中繼器的篩選：

6）鼠標(biāo)點(diǎn)擊半選按鈕時(shí)

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

當(dāng)然了，如果你懶的話，也可以直接復(fù)制鼠標(biāo)單擊未選按鈕時(shí)的交互，復(fù)制過(guò)來(lái)，也可以通用。

7）鼠標(biāo)點(diǎn)擊全選按鈕時(shí)

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

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

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

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