多層級動(dòng)態(tài)表格是Axure設(shè)計(jì)中非常實(shí)用的一個(gè)設(shè)計(jì)思路。但因?yàn)檫@個(gè)設(shè)計(jì)會(huì)涉及到Axure的中繼器等高端操作，很多小伙伴并不是很熟悉。這篇文章，我們手把手教大家怎么做。

多層級表格又成為樹形表格，是在后臺常用的一種表格形式，當(dāng)表格數(shù)據(jù)存在多層級關(guān)系是，可以通過多層級表格，從而更加清晰的呈現(xiàn)數(shù)據(jù)內(nèi)容，幫助人們更好地理解和分析數(shù)據(jù)之間的關(guān)系，從而更加有效地傳遞信息。

所以今天作者就教大家怎么在Axure里制作多層級動(dòng)態(tài)表格，包括展開、折疊、增加、修改、刪除等效果，具體效果如下所示：

一、效果展示

1、可以點(diǎn)擊箭頭展開或者收起子級內(nèi)容

2、可以動(dòng)態(tài)修改表格內(nèi)容

3、可以在指定位置動(dòng)態(tài)增加同級節(jié)點(diǎn)或子級

4、可以刪除多余的內(nèi)容

二、制作教程

1. 材料準(zhǔn)備

1.1 表格表頭部分

表頭部分我們用多個(gè)矩形組合即可。

1.2 表格內(nèi)容部分

表格內(nèi)容部分我們用中繼器制作，中繼器內(nèi)每格和上面表頭每格的距離一樣。

第一列我們是做樹的結(jié)構(gòu)，包括矩形、箭頭（放在動(dòng)態(tài)面板里的兩個(gè)狀態(tài)，分別是展開和收起，在里面分別放置向下的箭頭和向右的箭頭）、圖片元件、文本標(biāo)簽、動(dòng)態(tài)面板、熱區(qū)（作用是擴(kuò)大箭頭點(diǎn)擊的范圍。），如下圖所示擺放：

第2到6列我們用和表頭對應(yīng)寬度的矩形即可。

最后一列操作列，我們增加幾個(gè)圖表，如下圖所示擺放：

然后增加一個(gè)背景矩形，作用是鼠標(biāo)移入時(shí)變色，和鼠標(biāo)單擊之后選中變色，所以我們要設(shè)置一個(gè)鼠標(biāo)移入的樣式和選中的樣式，具體樣式你們根據(jù)需要設(shè)置就可以了。

我們把所有元件組合，勾選允許內(nèi)部元件觸發(fā)交互效果的多選按鈕，勾選之后鼠標(biāo)移入這個(gè)組合，背景矩形的懸停樣式就可以自動(dòng)觸發(fā)，而不會(huì)被上方元件擋住。

中繼器表格我們需要以下幾列：

• no列：代碼第幾行按123456……順序填寫即可，后續(xù)用于拆入行的排序
• tree1-tree6列：對應(yīng)樹節(jié)點(diǎn)的內(nèi)容，可參考下方案例按照樹的層級填寫即可。案例中最高是6級的樹，如果需要增加更多層級，也可以自行添加列和后續(xù)交互。
• b2-b6列：對應(yīng)表格里第2到6列顯示的內(nèi)容
• jiantou列：控制該節(jié)點(diǎn)是否有箭頭，默認(rèn)有箭頭，如果沒有箭頭就填無箭頭。
• xianshi列：控制該節(jié)點(diǎn)內(nèi)容是否顯示，默認(rèn)顯示，如果默認(rèn)不顯示就填寫隱藏。
• xuanzhuan列：控制該節(jié)點(diǎn)箭頭的方向，默認(rèn)向下打開，如果默認(rèn)向右收起就填寫收起。
• bianse列：控制該節(jié)點(diǎn)是否被選中變色，默認(rèn)未選中，如果需要選中就填寫1。

這樣材料就設(shè)置好了。

1.3 添加和修改節(jié)點(diǎn)彈窗

我們要做3個(gè)彈窗，包括增加同級節(jié)點(diǎn)，增加子級節(jié)點(diǎn)，修改節(jié)點(diǎn)三個(gè)，里面主要是用文本標(biāo)簽、按鈕、輸入框來制作，如下圖所示擺放：

做好之后我們組合轉(zhuǎn)為動(dòng)態(tài)面板，默認(rèn)隱藏，固定在屏幕中部。

1.4 刪除節(jié)點(diǎn)彈窗

刪除節(jié)點(diǎn)彈窗會(huì)相對簡單，只需要確定是否刪除即可，我們用矩形、按鈕和文本標(biāo)簽搭建即可：

2. 設(shè)置交互

2.1 設(shè)置表格內(nèi)容

第一列我們要寫一個(gè)樹元件的交互，具體的可以參考我之前寫的文章《用中繼器制作樹元件》，里面有詳細(xì)的講解怎么用中繼器制作樹元件的效果。

中繼器每項(xiàng)加載時(shí)，如果是axure10，我們可以直接點(diǎn)擊中繼器表格的鏈接按鈕，將b2到b6列的值設(shè)置的中繼器對應(yīng)的矩形內(nèi)容；如果是axure8或9就要用用設(shè)置文本的交互，將b2列到b6列對應(yīng)的內(nèi)容設(shè)置到對應(yīng)的矩形元件里。

這樣表格的內(nèi)容就出來了。

2.2 添加子級節(jié)點(diǎn)

點(diǎn)擊添加子級按鈕時(shí)，例外，我們要新建幾個(gè)默認(rèn)隱藏的文本，用設(shè)置文本的交互，記錄tree1到tree6的結(jié)構(gòu)。然后用顯示的交互，將添加同級節(jié)點(diǎn)的彈窗顯示出來。

然后想返回節(jié)點(diǎn)信息，例如ABC總公司-廣東分公司-財(cái)務(wù)部這種格式，就要根據(jù)所在層級寫條件，用設(shè)置文本的交互，設(shè)置到對應(yīng)的元件，這個(gè)可做可不做，算是后面的優(yōu)化。

添加子級節(jié)點(diǎn)彈窗里的確認(rèn)按鈕鼠標(biāo)單擊時(shí)，我們用添加行的交互，將輸入框里的數(shù)據(jù)，更新到中繼器表格里。

這里就會(huì)涉及排序的問題，我們中繼器表格里第一列no就是用于排序的，所以在中繼器載入時(shí)，我們用添加排序的交互，對應(yīng)no列就行升序排列。

那這樣我們就可以通過更新序號，做到在對應(yīng)位置拆入行。

案例中添加子節(jié)點(diǎn)是在所有子節(jié)點(diǎn)的最后添加的，所以我們要根據(jù)前面記錄到tree1~6來做一個(gè)篩選，看看最后一個(gè)子節(jié)點(diǎn)的序號是多少。

所以我們在中繼器每項(xiàng)加載時(shí)，用一個(gè)隱藏文本記錄對應(yīng)的序號。

這樣，就可以記錄到顯示的最后一行的序號，但是默認(rèn)的是整個(gè)表格最后一行的序號，所以我們要先對中繼器進(jìn)行篩選，例如在ABC總公司-廣東分公司-財(cái)務(wù)部下方添加新崗位，那我們就對ABC總公司-廣東分公司-財(cái)務(wù)部進(jìn)行篩選，就可以得到財(cái)務(wù)部下方，最后一行數(shù)據(jù)的序號。所以對于不同的層級，會(huì)有不同的篩選條件，我們以第五級為例，因?yàn)榘咐凶罡?級，所以第五級是最后一個(gè)可以添加子級的層級。

篩選條件就是這個(gè)，LVAR1到5就是我們之前記錄tree列的值，TargetItem.tree1==LVAR1&&TargetItem.tree2==LVAR2&&TargetItem.tree3==LVAR3&&TargetItem.tree4==LVAR4&&TargetItem.tree5==LVAR5.

如果是1級就是TargetItem.tree1==LVAR1，2級就是TargetItem.tree1==LVAR1&&TargetItem.tree2，如此類推。

篩選完成獲得最后一行文本之后，那我們用更新行的交互，將對應(yīng)比no值大的行的no值都加1，例如最后一行是10，那11以后得行，序號就都加1，就變成12、13、14，空出來了一個(gè)11。

我們在用添加行的交互，將no+1，例如10+1等于11添加到no列里，然后前面記錄的tree列的值，以及輸入框的值都添加上去即可。這樣就完成添加了。

但是這里還有一個(gè)問題，因?yàn)樘砑拥氖亲蛹?，所以不知道父級箭頭的方向，而且如果父級原來沒有子級，就會(huì)沒有箭頭，如果默認(rèn)是收起，新增的這行就應(yīng)該默認(rèn)不顯示。

所以我們用一個(gè)簡單的方式將，父級行更新為右箭頭和展示，這樣我們還要將父級行下一級的內(nèi)容設(shè)置為默認(rèn)顯示，這里通過更新行的交互就可以實(shí)現(xiàn)了。

完成之后記得要移除篩選。

在彈窗隱藏時(shí)，我們要做一個(gè)重置還原的操作，就是把輸入框里的內(nèi)容清空，不然下一次進(jìn)來就會(huì)有上一次的內(nèi)容。

這樣我們就完成了增加子級節(jié)點(diǎn)的操作了，當(dāng)然了，我們在這之前還可以增加對文本框是否必填的條件判斷，例如文本為空時(shí)，點(diǎn)擊確認(rèn)按鈕彈出對應(yīng)的提示彈窗，這些可以根據(jù)需要添加。

2.3 添加同級節(jié)點(diǎn)

這里和上面的思路基本上是一致的，只是因?yàn)樵黾拥氖峭墸圆恍枰紤]父級有沒有箭頭，以及箭頭方向的問題。相當(dāng)于只需要根據(jù)不同樹的層級，獲取到子級最后的no值，然后將大于no值的行的no值都加一，在用添加行的交互，添加對應(yīng)的值即可。這個(gè)比上面還要簡化。

2.4 修改節(jié)點(diǎn)內(nèi)容

修改節(jié)點(diǎn)和添加同級節(jié)點(diǎn)很相似，但是也有不同。

鼠標(biāo)點(diǎn)擊修改節(jié)點(diǎn)按鈕的時(shí)候，我們除了要記錄tree列數(shù)的值之外，我們還要將表格的值設(shè)置到對應(yīng)的輸入框里，b2到b6直接設(shè)置就可以了。

樹節(jié)點(diǎn)的值，我們要根據(jù)所在是第幾級為條件，設(shè)置對應(yīng)tree列的值，例如是在第6級，就將tree6的值設(shè)置到第一個(gè)輸入框；如果是在第5級，就將tree5的值設(shè)置到第一個(gè)輸入框……

在修改節(jié)點(diǎn)彈窗確認(rèn)按鈕鼠標(biāo)單擊時(shí)，我們根據(jù)所在tree的層級進(jìn)行更新行就可以了，更新對應(yīng)行的內(nèi)容為對應(yīng)輸入框里的內(nèi)容。這里有一點(diǎn)要注意的，如果更新了第一列樹節(jié)點(diǎn)的內(nèi)容，按我們還要更新他的子節(jié)點(diǎn)，例如財(cái)務(wù)部改名為財(cái)會(huì)部，這樣如果我們值更新財(cái)務(wù)部這一行的話，那他原本的子級例如財(cái)務(wù)會(huì)計(jì)，還是跟在原來的財(cái)務(wù)部下面，所以他所有的子級也要一同更新。這里我們根據(jù)所在層級，寫不同的更新條件即可。

2.5刪除節(jié)點(diǎn)內(nèi)容

點(diǎn)擊刪除按鈕后，和前面一樣，先用設(shè)置文本記錄tree列的值，然后彈出刪除確認(rèn)的按鈕。

點(diǎn)擊確認(rèn)按鈕后，根據(jù)所在的層級，用刪除行的按鈕，將他以及對應(yīng)子級刪除即可。例如他是1級，ABC公司，那刪除條件就是tree1==LVAR1，LVAR1就是記錄tree1的值；如果是2級，例如ABC公司-廣東分公司，那刪除條件就是tree1==LVAR1&&tree2==LVAR2……

刪除之后，我們還要做一個(gè)判斷，就是刪除的這個(gè)是否是父級節(jié)點(diǎn)的最后一個(gè)，例如說財(cái)務(wù)部下面有財(cái)務(wù)會(huì)計(jì)崗位，那如果是唯一的崗位，刪除之后，財(cái)務(wù)部級沒有子級了，理論上就不應(yīng)該有箭頭。

所以我們根據(jù)所在層級，對他的父級先進(jìn)行篩選，例如是刪除的是ABC公司-廣東分公司，我們就對ABC總公司進(jìn)行篩選，用然后用visiblecount函數(shù)可以獲取到篩選后有幾條數(shù)據(jù)，如果只有1條，就代表只有父級這個(gè)節(jié)點(diǎn)，沒有其他子級了，我們就用更新行的交互，將他jiantou列的值更新為無箭頭，完成之后移除篩選即可。

這樣我們制作完成了，下次使用時(shí)，我們只需要修改中繼器表格里數(shù)據(jù)，就可以生成含交互效果的多層級的動(dòng)態(tài)增刪改的樹形表格了。

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