中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、交互的設(shè)置

1. 中繼器每項(xiàng)加載時(shí)

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

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

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

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

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

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

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

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

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

3. 鼠標(biāo)點(diǎn)擊箭頭時(shí)交互

這里我們要分條件來(lái)說(shuō)明；

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

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

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

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

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

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