多層級動態表格是Axure設計中非常實用的一個設計思路。但因為這個設計會涉及到Axure的中繼器等高端操作，很多小伙伴并不是很熟悉。這篇文章，我們手把手教大家怎么做。

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

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

一、效果展示

1、可以點擊箭頭展開或者收起子級內容

2、可以動態修改表格內容

3、可以在指定位置動態增加同級節點或子級

4、可以刪除多余的內容

原型地址：https://nme9lo.axshare.com/#g=1&p=樹形表格_增刪改

二、制作教程

1. 材料準備

1.1 表格表頭部分

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

1.2 表格內容部分

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

第一列我們是做樹的結構，包括矩形、箭頭（放在動態面板里的兩個狀態，分別是展開和收起，在里面分別放置向下的箭頭和向右的箭頭）、圖片元件、文本標簽、動態面板、熱區（作用是擴大箭頭點擊的范圍。），如下圖所示擺放：

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

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

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

我們把所有元件組合，勾選允許內部元件觸發交互效果的多選按鈕，勾選之后鼠標移入這個組合，背景矩形的懸停樣式就可以自動觸發，而不會被上方元件擋住。

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

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

這樣材料就設置好了。

1.3 添加和修改節點彈窗

我們要做3個彈窗，包括增加同級節點，增加子級節點，修改節點三個，里面主要是用文本標簽、按鈕、輸入框來制作，如下圖所示擺放：

做好之后我們組合轉為動態面板，默認隱藏，固定在屏幕中部。

1.4 刪除節點彈窗

刪除節點彈窗會相對簡單，只需要確定是否刪除即可，我們用矩形、按鈕和文本標簽搭建即可：

2. 設置交互

2.1 設置表格內容

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

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

這樣表格的內容就出來了。

2.2 添加子級節點

點擊添加子級按鈕時，例外，我們要新建幾個默認隱藏的文本，用設置文本的交互，記錄tree1到tree6的結構。然后用顯示的交互，將添加同級節點的彈窗顯示出來。

然后想返回節點信息，例如ABC總公司-廣東分公司-財務部這種格式，就要根據所在層級寫條件，用設置文本的交互，設置到對應的元件，這個可做可不做，算是后面的優化。

添加子級節點彈窗里的確認按鈕鼠標單擊時，我們用添加行的交互，將輸入框里的數據，更新到中繼器表格里。

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

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

案例中添加子節點是在所有子節點的最后添加的，所以我們要根據前面記錄到tree1~6來做一個篩選，看看最后一個子節點的序號是多少。

所以我們在中繼器每項加載時，用一個隱藏文本記錄對應的序號。

這樣，就可以記錄到顯示的最后一行的序號，但是默認的是整個表格最后一行的序號，所以我們要先對中繼器進行篩選，例如在ABC總公司-廣東分公司-財務部下方添加新崗位，那我們就對ABC總公司-廣東分公司-財務部進行篩選，就可以得到財務部下方，最后一行數據的序號。所以對于不同的層級，會有不同的篩選條件，我們以第五級為例，因為案例中最高6級，所以第五級是最后一個可以添加子級的層級。

篩選條件就是這個，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，如此類推。

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

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

但是這里還有一個問題，因為添加的是子級，所以不知道父級箭頭的方向，而且如果父級原來沒有子級，就會沒有箭頭，如果默認是收起，新增的這行就應該默認不顯示。

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

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

在彈窗隱藏時，我們要做一個重置還原的操作，就是把輸入框里的內容清空，不然下一次進來就會有上一次的內容。

這樣我們就完成了增加子級節點的操作了，當然了，我們在這之前還可以增加對文本框是否必填的條件判斷，例如文本為空時，點擊確認按鈕彈出對應的提示彈窗，這些可以根據需要添加。

2.3 添加同級節點

這里和上面的思路基本上是一致的，只是因為增加的是同級，所以不需要考慮父級有沒有箭頭，以及箭頭方向的問題。相當于只需要根據不同樹的層級，獲取到子級最后的no值，然后將大于no值的行的no值都加一，在用添加行的交互，添加對應的值即可。這個比上面還要簡化。

2.4 修改節點內容

修改節點和添加同級節點很相似，但是也有不同。

鼠標點擊修改節點按鈕的時候，我們除了要記錄tree列數的值之外，我們還要將表格的值設置到對應的輸入框里，b2到b6直接設置就可以了。

樹節點的值，我們要根據所在是第幾級為條件，設置對應tree列的值，例如是在第6級，就將tree6的值設置到第一個輸入框；如果是在第5級，就將tree5的值設置到第一個輸入框……

在修改節點彈窗確認按鈕鼠標單擊時，我們根據所在tree的層級進行更新行就可以了，更新對應行的內容為對應輸入框里的內容。這里有一點要注意的，如果更新了第一列樹節點的內容，按我們還要更新他的子節點，例如財務部改名為財會部，這樣如果我們值更新財務部這一行的話，那他原本的子級例如財務會計，還是跟在原來的財務部下面，所以他所有的子級也要一同更新。這里我們根據所在層級，寫不同的更新條件即可。

2.5刪除節點內容

點擊刪除按鈕后，和前面一樣，先用設置文本記錄tree列的值，然后彈出刪除確認的按鈕。

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

刪除之后，我們還要做一個判斷，就是刪除的這個是否是父級節點的最后一個，例如說財務部下面有財務會計崗位，那如果是唯一的崗位，刪除之后，財務部級沒有子級了，理論上就不應該有箭頭。

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

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

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