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

樹和表格是信息系統(tǒng)中兩個(gè)重要的元件，樹結(jié)構(gòu)是一種層次化的數(shù)據(jù)結(jié)構(gòu)，它以樹的形式展示數(shù)據(jù)的層次關(guān)系；表格是一種二維結(jié)構(gòu)，由行和列組成。每一行表示一個(gè)記錄，每一列表示一個(gè)屬性。在實(shí)際應(yīng)用中，這兩種結(jié)構(gòu)常常會(huì)結(jié)合使用，以滿足不同的需求。

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

一、效果展示

• 點(diǎn)擊樹節(jié)點(diǎn)的箭頭可以展開或者收起子節(jié)點(diǎn)。
• 點(diǎn)擊節(jié)點(diǎn)內(nèi)容可以對右側(cè)表格進(jìn)行篩選，例如點(diǎn)擊廣東分公司，就篩選出所有廣東分公司的數(shù)據(jù)，點(diǎn)擊廣州營業(yè)廳，就篩選出廣州營業(yè)廳的數(shù)據(jù)。

二、制作教程

這里我們主要分為兩個(gè)部分，一個(gè)是右邊的中繼器表格，一個(gè)是左側(cè)的樹結(jié)構(gòu)。

1. 中繼器表格的制作

這里我們用中繼器來制作表格，主要是因?yàn)?，如果要?shí)現(xiàn)增刪改查這種動(dòng)態(tài)效果的表格，只能用中繼器實(shí)現(xiàn)，如果用普通的表格原件，就只能做出靜態(tài)的表格。

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

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

中繼器表格的設(shè)置：我們需要增加一下幾列內(nèi)容。

t1-t6對應(yīng)樹的1-6級的節(jié)點(diǎn)，因?yàn)槲覀兊臉鋵懙臅r(shí)候最高是支持到6級，一般6級已經(jīng)滿足日常需要，我也很難找到案例有到6級的（所以這個(gè)案例是5級的案例），當(dāng)然后續(xù)有需要，也可以用同樣的方法增加層級。

其他列，其他列的話是對應(yīng)你需要顯示的內(nèi)容，案例中no和name列代表員工編號和姓名，根據(jù)需要增加和填寫即可。

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

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

如果表格函數(shù)比較多，也可以轉(zhuǎn)為動(dòng)態(tài)面板，調(diào)整動(dòng)態(tài)面板尺寸和顯示滾動(dòng)條來處理。

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

2. 樹元件的選擇

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

我們用中繼器制作的樹元件就不一樣了，因?yàn)槭侵欣^器做的，所以交互只需要寫一遍，所有節(jié)點(diǎn)都使用，而且后續(xù)可以根據(jù)自身需要，添加增刪改查等聯(lián)動(dòng)效果，交互樣式等都可以隨心所欲的修改。所以我們會(huì)用中繼器制作的樹元件，這個(gè)在我前面的文章里也有詳細(xì)的教程，這里就不重復(fù)說明了，你們可以參考用中繼器制作樹元件那篇教程制作。

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

我們用樹元件也很簡單，在鼠標(biāo)單擊里面的文本標(biāo)簽時(shí)，我們用添加篩選的交互，對應(yīng)右側(cè)中繼器表格進(jìn)行篩選，里面樹里的tree1-6和表格里的t1-6是一一對應(yīng)的。

但是這里會(huì)存在一個(gè)問題，就是例如我們點(diǎn)擊廣東分公司下的廣州營業(yè)廳，如果我們用等于號就是tree1=t1&&tree2==t2&&tree3==t3……這種形式，這樣的話我們就只能找到廣州營業(yè)廳一條數(shù)據(jù)一條數(shù)據(jù)，因?yàn)閺V州營業(yè)廳下一邊是空值，一邊是有數(shù)據(jù)的例如財(cái)務(wù)部，兩個(gè)不等的關(guān)系，所以就沒法顯示。

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

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

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

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