下面是筆者整理分享的關于Axure高保真教程中樹篩選中繼器表格的相關內容，想要了解更多的同學可以進來看看，了解更多哦！

樹和表格是信息系統中兩個重要的元件，樹結構是一種層次化的數據結構，它以樹的形式展示數據的層次關系；表格是一種二維結構，由行和列組成。每一行表示一個記錄，每一列表示一個屬性。在實際應用中，這兩種結構常常會結合使用，以滿足不同的需求。

所以今天作者就教大家怎么在Axure里制作樹結構篩選中繼器表格的原型模板，制作完成后我們只需要填寫好中繼器表格的數據，就可以自動生成交互效果，具體效果如下所示：

一、效果展示

• 點擊樹節點的箭頭可以展開或者收起子節點。
• 點擊節點內容可以對右側表格進行篩選，例如點擊廣東分公司，就篩選出所有廣東分公司的數據，點擊廣州營業廳，就篩選出廣州營業廳的數據。

原型地址：https://idx3zo.axshare.com/#g=1&p=樹篩選中繼器表格。

二、制作教程

這里我們主要分為兩個部分，一個是右邊的中繼器表格，一個是左側的樹結構。

1. 中繼器表格的制作

這里我們用中繼器來制作表格，主要是因為，如果要實現增刪改查這種動態效果的表格，只能用中繼器實現，如果用普通的表格原件，就只能做出靜態的表格。

主要材料：中繼器和矩形，在中繼器里放置多個矩形，有幾列就放置多少個，如下圖所示。

如果需要交互樣式效果，如移入行變色，我們可以根據需要在底部添加背景矩形，設置移入時的交互樣式，組合后勾選允許觸發內部交互樣式即可。

中繼器表格的設置：我們需要增加一下幾列內容。

t1-t6對應樹的1-6級的節點，因為我們的樹寫的時候最高是支持到6級，一般6級已經滿足日常需要，我也很難找到案例有到6級的（所以這個案例是5級的案例），當然后續有需要，也可以用同樣的方法增加層級。

其他列，其他列的話是對應你需要顯示的內容，案例中no和name列代表員工編號和姓名，根據需要增加和填寫即可。

填寫完成我，我們要將表格里的內容設置到中繼器里對應的元件，Axure10的話我們點擊中繼器表格表頭的連接元件的按鈕，就可以實現了，如果是Axure8或9，就要寫一個設置文本的交互了，在中繼器每項加載時，我們用設置文本的交互，選擇元件后，里面插入對應列名的item函數即可。

這樣我們就完成了最簡單的中繼器的制作，當然我們可以根據自身需要增加一些樣式的效果，例如增加交替的背景顏色實現斑馬線效果，或者是移入高亮變色的效果，這些都可以根據你們需要增加。

如果表格函數比較多，也可以轉為動態面板，調整動態面板尺寸和顯示滾動條來處理。

表頭部分我們同樣用矩形制作就可以了，這個很簡單，和里面每列對應的矩形的寬度一致，然后擺放好位置即可。

2. 樹元件的選擇

樹元件的話，我們沒有用Axure自身提供的樹元件，我們用中繼器制作的樹元件。Axure提供的樹元件比較局限，樹節點多的時候，要每個節點都要寫一次篩選的交互，這樣會很頭痛，效率極低；而且后續拓展也不足，例如想在節點里增加圖標，或者添加對樹節點的增刪改查等效果，Axure自帶的樹元件都是不能滿足的。

我們用中繼器制作的樹元件就不一樣了，因為是中繼器做的，所以交互只需要寫一遍，所有節點都使用，而且后續可以根據自身需要，添加增刪改查等聯動效果，交互樣式等都可以隨心所欲的修改。所以我們會用中繼器制作的樹元件，這個在我前面的文章里也有詳細的教程，這里就不重復說明了，你們可以參考用中繼器制作樹元件那篇教程制作。

3. 樹元件篩選表格的交互

我們用樹元件也很簡單，在鼠標單擊里面的文本標簽時，我們用添加篩選的交互，對應右側中繼器表格進行篩選，里面樹里的tree1-6和表格里的t1-6是一一對應的。

但是這里會存在一個問題，就是例如我們點擊廣東分公司下的廣州營業廳，如果我們用等于號就是tree1=t1&&tree2==t2&&tree3==t3……這種形式，這樣的話我們就只能找到廣州營業廳一條數據一條數據，因為廣州營業廳下一邊是空值，一邊是有數據的例如財務部，兩個不等的關系，所以就沒法顯示。

所以這里我們除了第一級可以用等于號之外，其他級我們要用包含的情況，例如財務部三個字里是可以包含空值這種情況，這樣就可以實現篩選了，這種方法我們需要用到indexof函數，他可以判斷一個值里是否包含另一個值。

例如廣州市里是否包含北京，如果不包含就會返回值-1，如果包含就會返回值所在的對應位置，例如在廣州市里查詢是否包含廣州，他就會返回0的位置，查詢州，就會返回1的位置，所以我們的判斷條件就是返回的值大于1即包含。

這樣我們制作完成了，下次使用時，我們只需要修改樹和表格里中繼器表格的數據，就可以自動生成對應的樹和表格內容，而且還是自帶樹篩選表格的交互效果，是不是很方便呢？

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