導(dǎo)讀：樹形表格在系統(tǒng)中是非常常用的表格類型，可以反映父級和子級關(guān)系，可以快速查看全局?jǐn)?shù)據(jù)，也可以下鉆查看詳細(xì)的數(shù)據(jù)。因為Axure里只提供了基礎(chǔ)的表格元件，沒有提供樹形表格的元件，所以今天作者就教大家如果用中繼器制作一個樹形表格。

制作完成之應(yīng)具備以下交互效果：

1. 點擊箭頭可以展開或者收起對應(yīng)的內(nèi)容
2. 數(shù)據(jù)維護(hù)在中繼器表格內(nèi)維護(hù)，填寫內(nèi)容后自動生成表格和交互
3. 可以自由控制初始表格顯示或收起的內(nèi)容

原型地址：https://r4neb0.axshare.com/#g=1

那接下來，我們以銀行基礎(chǔ)指標(biāo)的樹形表格為案例教大家制作樹形表格。

一、基本材料的準(zhǔn)備

這個原型里我們主要用到的元件包括：中繼器、矩形、三角形狀（箭頭）

矩形我們主要用于制作表格的表頭和內(nèi)容：

表頭我們有多少列就用幾個矩形，具體尺寸和樣式可以自行設(shè)置；

中繼器表格里，我們需要放置用到矩形、三角形狀（箭頭）、文本標(biāo)簽制作，里面的矩形和表頭的各個矩形的寬度要對應(yīng)好，這樣才能夠?qū)R，最后一個矩形對應(yīng)的是操作（查看列表），所以我們要增加懸停樣式——下劃線，這樣鼠標(biāo)移入就有一個可以點擊的交互樣式。表格內(nèi)容的矩形設(shè)置為透明，然后我們在他們底部增加一個大矩形，默認(rèn)透明，選中樣式是灰色，禁用樣式是淺藍(lán)色，這里主要是做一個變色的效果。將上述元件組合好，如下圖所示擺放：

中繼器表格里我們需要增加以下幾列的內(nèi)容：

Column1~6：這里對應(yīng)表格1~6列展示的內(nèi)容，大家可以根據(jù)實際需要增加或者減少列數(shù)

jiantou：這里我們用這個值來空時該行是否顯示箭頭，如果值為1就顯示箭頭，否則就隱藏箭頭，后續(xù)我們會通過交互實現(xiàn)。案例中如果是一級分行就是有對應(yīng)的二級支行，所以分行的jiantou值都填寫1，支行的jiantou值都默認(rèn)為空值

fangxiang：這里是控制箭頭方向的值，后續(xù)通過交互實現(xiàn)，箭頭向下（打開下級內(nèi)容）就填1，默認(rèn)向右（隱藏下級內(nèi)容）就不需填寫。這里一般都是默認(rèn)為空即可

xianshi：控制該行內(nèi)容是否顯示，后續(xù)通過交互實現(xiàn)，一般一級默認(rèn)顯示填寫1，二級默認(rèn)隱藏就不需要填寫，當(dāng)然如果你想二級默認(rèn)顯示也可以填寫1，這里箭頭的方向也要對應(yīng)修改。

shangyiji：該行對應(yīng)的的父級是什么，這里對應(yīng)的是Column1，如果是第一級（沒有父級）就不需要填寫。

二、交互的設(shè)置

1. 中繼器每項加載時

設(shè)置文本：我們用設(shè)置文本的交互，將Column1~6的值設(shè)置到表格內(nèi)對應(yīng)的矩形元件里

隱藏箭頭：這里要添加一個條件判斷，如果jiantou列的值不等于1，那么我們就用隱藏的交互將箭頭隱藏即可。有的同學(xué)可能會問，那么如果jiantou的值等于1，那是不是需要用顯示的交互，將箭頭顯示出來呢？其實并不需要，因為箭頭默認(rèn)就是顯示的，所以寫不寫并沒有影響

旋轉(zhuǎn)箭頭：同樣我們要根據(jù)fangxiang列的值來添加條件判斷，如果方向列的值等于1，那我們就用旋轉(zhuǎn)的交互，把箭頭旋轉(zhuǎn)到向下的文字，案例中用的箭頭素材是0°的時候就是向下的，所以我們用選擇到達(dá)，度數(shù)為0°，這里不同的素材會有不同，具體旋轉(zhuǎn)的度數(shù)根據(jù)實際素材來設(shè)置。和上面道理一樣，我們只需要寫箭頭向下的交互，因為默認(rèn)就是向右的，如果上面條件不符合，就默認(rèn)向右了

隱藏組合：這里是根據(jù)xianshi列的值來添加條件，如果顯示列的值不等于1，那么我們用隱藏的組合把中繼器內(nèi)的整個組合隱藏起來即可

選中背景矩形：這里是希望二級行的也和一級行的顏色有所區(qū)分，所以前面我們在材料準(zhǔn)備的時候就把背景矩形的選中顏色設(shè)置為灰色，所以我們只需要根據(jù)他是否有上一級來決定是否需要控制他選中變色。我們增加條件，如果有上一級我們就用設(shè)置選中的交互，將矩形設(shè)置為真就可以了

2. 鼠標(biāo)移入組合時交互

鼠標(biāo)移入組合時，我們對應(yīng)行有一個高亮變色的效果，本來應(yīng)該用選中的樣式的，但是前面用了選中的樣式來區(qū)分1級和2級行的顏色了，所以這里我們就用禁用樣式來代替。

鼠標(biāo)移入時：我們用禁用的交互將背景矩形禁用，這樣他就會有一個變色的效果

鼠標(biāo)移出時：我們用啟用的交互將背景矩形啟用，這樣他就回復(fù)之前的樣式

3. 鼠標(biāo)點擊箭頭時交互

這里我們要分條件來說明；

第一種情況鼠標(biāo)單擊之前如果箭頭是向下的，那么我們要首先把箭頭變成向右，那么我們前面設(shè)置了箭頭方向是取決于jiantou列的值的，所以我們用更新行的交互，把jiantoulie的值更新為0，這樣他就向右了。除了要改變箭頭列的值，我們還要把子級隱藏起來，那我們又知道一行是否顯示，是通過xianshi列來控制的，所以我們把所有對應(yīng)的子級的xianshi列的值更新為0即可，對應(yīng)的條件就是，子級行里的shangji列的值跟當(dāng)前行第一列的顯示的分行值是一樣的。

第二種情況就是和上面是相反的，即點擊之前箭頭是向右的，那么我們就把箭頭變回下，所以我們用更新行的交互，把jiantoulie的值更新為1。然后我們還要把對應(yīng)的子級顯示出來，所以我們把所有對應(yīng)的子級的xianshi列的值更新為1即可,對應(yīng)的條件也是不變的。

這樣我們就完成樹形表格原型模板的制作了，以后使用時只需要在中繼器表格里填寫內(nèi)容，就可自動生成樹形表格，是不是很方便呢。

那以上就是用中繼器制作樹形表格原型模板的全部內(nèi)容了，感謝您的閱讀，我們下期見。

本文由 @Axure高保真原型 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。