Axure高保真教程:用中繼器制作多選樹
多選樹常用于展示層級結(jié)構(gòu)并允許用戶選擇多個節(jié)點,長在設(shè)置、文件瀏覽器等場景有所使用。那么該如何利用中繼器制作多選樹?本文對此進(jìn)行了梳理,一起來看看吧。
“多選樹”可能指的是一種用戶界面元素,用于展示層級結(jié)構(gòu)并允許用戶選擇多個節(jié)點。這在軟件應(yīng)用程序中常用于設(shè)置、文件瀏覽器等場景。
Axure里面雖然自帶了一個樹元件,但是并沒有多選的功能,所以今天就教大家如何用中繼器制作一個多選樹的基礎(chǔ)元件,制作完成后我們只需要填寫表格數(shù)據(jù),就可以自動生成對應(yīng)的書元件,具體效果如下所示:
一、效果展示
- 點擊箭頭可以展開或者收起子節(jié)點。
- 點擊多選按鈕可以選中或者取消選中當(dāng)前節(jié)點以及子節(jié)點
- 父級節(jié)點會根據(jù)子節(jié)點選中情況回顯選中、半選中、未選中的狀態(tài)
- 不同的節(jié)點可以配置不同的圖標(biāo)。
二、制作教程
1. 材料準(zhǔn)備
我們用到的材料包括中繼器,在中繼器里面還需要一個透明的背景矩形、箭頭(向下、向右)、圖片元件、文本標(biāo)簽、動態(tài)面板、熱區(qū)、多選按鈕(選中、半選、未選中狀態(tài)),如下圖所示擺放:
其中多選按鈕的三個狀態(tài)要放在同一個動態(tài)面板的3個state里,分別為未選、半選、全選,后續(xù)通過切換面板狀態(tài)的交互就可以進(jìn)行切換。
向下和向右兩個箭頭需要放在同一個動態(tài)面板的2個state里,分別是展開和收起,在里面分別放置向下的箭頭和向右的箭頭。后續(xù)通過切換面板狀態(tài)的交互就可以進(jìn)行切換,如果你們放在動態(tài)面板里,那后續(xù)就要改成顯示隱藏的交互。
背景矩形的作用是鼠標(biāo)移入時變色,和鼠標(biāo)單擊之后選中變色,所以我們要設(shè)置一個鼠標(biāo)移入的樣式和選中的樣式,具體樣式你們根據(jù)需要設(shè)置就可以了。
熱區(qū)的作用是擴大箭頭點擊的范圍。
文字標(biāo)簽增加一個選中樣式,同樣用于選中后變色的交互,具體樣式你們根據(jù)需要設(shè)置就可以了。
我們把所有元件組合,勾選允許內(nèi)部元件觸發(fā)交互效果的多選按鈕,勾選之后鼠標(biāo)移入這個組合,背景矩形的懸停樣式就可以自動觸發(fā),而不會被上方元件擋住。
中繼器表格我們需要以下幾列:
- pic列:鼠標(biāo)右鍵導(dǎo)入該樹節(jié)點對應(yīng)的圖片即可。
- tree1-tree6列:對應(yīng)樹節(jié)點的內(nèi)容,可參考下方案例按照樹的層級填寫即可。案例中最高是6級的樹,如果需要增加更多層級,也可以自行添加列和后續(xù)交互。
- jiantou列:控制該節(jié)點是否有箭頭,默認(rèn)有箭頭,如果沒有箭頭就填無箭頭。
- xianshi列:控制該節(jié)點內(nèi)容是否顯示,默認(rèn)顯示,如果默認(rèn)不顯示就填寫隱藏。
- xuanzhuan列:控制該節(jié)點箭頭的方向,默認(rèn)向下打開,如果默認(rèn)向右收起就填寫收起。
- xuanzhong列:控制該節(jié)點是否被選中,一般默認(rèn)為空,即未選狀態(tài),如果默認(rèn)選中就填寫全選,默認(rèn)半選就填寫半選
這樣材料就設(shè)置好了。
2. 設(shè)置交互
在中繼器每項加載時,我們用設(shè)置文本的交互將中繼器表格里tree列的內(nèi)容設(shè)置都文本標(biāo)簽里。這里就涉及到一個條件控制的問題了。
我們要先判斷當(dāng)前行內(nèi)容是在哪個層級的,所以我們可以根據(jù)tree1-6列的內(nèi)容是否為空來判斷,如果tree6有內(nèi)容,那他就是6級節(jié)點;如果tree6沒有內(nèi)容,tree5有內(nèi)容,那他就是5級節(jié)點;如果tree6和tree5都沒有內(nèi)容,但是tree4有內(nèi)容,那他就是4級節(jié)點……就這樣依次判斷就可以,然后用設(shè)置文本的交互,根據(jù)不同的條件,將tree列的值設(shè)置到文本標(biāo)簽里顯示。
然后我們在用設(shè)置圖片的交互,將pic列的圖片值設(shè)置到圖片元件里。
這樣文本是設(shè)置了,但是層級沒有出來,因為所有節(jié)點都在同一個垂直面上這時我們可以用移動的交互,如果是1級的話,改變;如果是2級的話就向右移動20個單位,;如果是3級的話就向右移動40個單位……依次類推。
這樣就可以將樹結(jié)構(gòu)設(shè)置出來了,設(shè)置完成之后我們要考慮箭頭顯示的問題了。
如果jiantou列的值等于無箭頭,我們用隱藏的交互,將箭頭所在的動態(tài)面板隱藏起來即可。
接下來我們考慮箭頭的方向,箭頭的方向右動態(tài)面板來控制,我們可以通過xuanzhuan列的值控制動態(tài)面板的狀態(tài),如果xuanzhuan列的值為收起,我們就用設(shè)置面板狀態(tài)的交互,將動態(tài)面板設(shè)置到收起的狀態(tài)。
然后我們考慮折疊的問題,被折疊的節(jié)點需要隱藏,這個我們通過顯示列來控制,如果顯示列的值等于隱藏,我們就用隱藏的交互,將整個組合隱藏起來。
最后,我們要控制值哪個節(jié)點被選中,這里我們用xuanzhong列的值來控制,我們可以直接根據(jù)里面的值,將多選按鈕的面板狀態(tài)設(shè)置到和值一樣,如果為空,就設(shè)置不成功,停留在未選的狀態(tài)里
這樣我們就完成了靜態(tài)的多選樹元件了,下面我們要增加動態(tài)的交互。
3. 展開收起子節(jié)點的交互
首先是鼠標(biāo)點擊箭頭后,展開和收起子節(jié)點的交互,我們將交互寫在對應(yīng)箭頭上方的熱區(qū)里。
如果點擊的是展開箭頭的熱區(qū),就是當(dāng)前箭頭是展開狀態(tài),點擊后我們就要將子節(jié)點隱藏起來,這里我們要用更新行的交互,第一個子節(jié)點將他隱藏,第二個是更新當(dāng)前節(jié)點的方向。
首先我們要知道當(dāng)前節(jié)點是幾級節(jié)點,這里的判斷方法和上面的一致,我們將符合條件的,例如當(dāng)前是1級節(jié)點,我們把所有tree1的值相等的行將他們更新,xianshi列的值更新為隱藏,箭頭方向更新為收起。
上面的條件也會把當(dāng)前節(jié)點隱藏,所以我們再用更新行的交互,將當(dāng)前行xianshi列的值設(shè)置為顯示,這樣點擊的節(jié)點就不會隱藏,并且xuanzhuan列的值更新為收起,這樣箭頭面板就會進(jìn)入收起的state,就是箭頭向右。
其他層級的節(jié)點也是用同樣的方式依次添加交互即可,寫完展開熱區(qū)的交互,接下來我們寫收起熱區(qū)的交互,其實思路都是一樣的,方向放過來就可以。
如果點擊的是收起箭頭的熱區(qū),就是當(dāng)前箭頭是收起狀態(tài),點擊后我們就要將子節(jié)點顯示起來,這里我們要用更新行的交互,第一個子節(jié)點將他顯示,第二個是更新當(dāng)前節(jié)點的方向。
這里需要注意的是,收起的話,我們是收起所有的子節(jié)點,但是展開的話我們只展開下一節(jié)點,例如點擊廣東省,我們只展開到市級的節(jié)點,不可能點廣東省就把廣東省下面所有區(qū)、街道、多少號、幾零幾都展開,這樣成千上萬的數(shù)據(jù),所以我么只展開下一節(jié)點的。
我們用更新行的交互,將符合條件下一節(jié)點的xianshi列的值更新為顯示,例如所在的是1級節(jié)點,我們的顯示對應(yīng)的二級節(jié)點,條件就是ture1的值相同,并且true3、4、5、6的值為空。
更新完子節(jié)點后,我們再次用更新行的交互將當(dāng)前節(jié)點xuanzhuan列的值更新為展開,這樣箭頭面板就會設(shè)置到展開面板,箭頭向下。
其他層級的節(jié)點也是用同樣的方式依次添加交互即可。
完成了展開收起的效果后,我們還有點擊多選按鈕選中和取消選中的交互。
4. 未選按鈕交互效果
鼠標(biāo)單擊未選按鈕時,相當(dāng)于要從未選變成全選
同樣我們首先也是要判斷現(xiàn)在是在第幾級,判斷的方法也是和上面一樣,如果item.tree不等于空,就在第6級,我們以第六級為例。單擊未選按鈕時,相當(dāng)于我們要將他變成全選,所以我們先用更新行的交互,將當(dāng)前行選中列的值更新為選中即可,因為6級是案例里最后一級,所以不需要考慮子級的問題;
判斷完6級,如果6級不成立,我們判斷5級,如果5級內(nèi)容不為空,我們要將5級和對應(yīng)子級的內(nèi)容都更新為全選,所以我們用更新行的交互,將tree1-5都相同的行xuanzhong列的值都更新為全選狀態(tài)
后面的5、4、3、2、1也是同理。
5. 半選按鈕交互設(shè)置
鼠標(biāo)單擊未選按鈕時,相當(dāng)于要從未選變成全選,所以半選按鈕的交互和未選按鈕是一樣的,我們直接用觸發(fā)事件,觸發(fā)未選按鈕的鼠標(biāo)單擊時的事件即可。
6. 全選按鈕交互設(shè)置
鼠標(biāo)單擊全選按鈕時,相當(dāng)于要從全選變成未選。
同樣我們首先也是要判斷現(xiàn)在是在第幾級,判斷的方法也是和上面一樣,如果item.tree不等于空,就在第6級,我們以第六級為例。單擊全選按鈕時,相當(dāng)于我們要將他變成未選,所以我們先用更新行的交互,將當(dāng)前行選中列的值更新為未選即可,因為6級是案例里最后一級,所以不需要考慮子級的問題。
判斷完6級,如果6級不成立,我們判斷5級,如果5級內(nèi)容不為空,我們要將5級和對應(yīng)子級的內(nèi)容都更新為未選,所以我們用更新行的交互,將tree1-5都相同的行xuanzhong列的值都更新為未選狀態(tài)。
后面的5、4、3、2、1也是同理。
7. 反選的交互
上面我們已經(jīng)完成了選中、半選、取消選中的交互,但是都是針對的是本級和子級的內(nèi)容,我們并不能進(jìn)行反選父級。
那如果要反選父級,我們在鼠標(biāo)單擊三個按鈕時,我們我們還需要統(tǒng)計,該節(jié)點的父節(jié)點下所有的子級的數(shù),以及選中的數(shù)量,如果子級的數(shù)=子級選中的數(shù)量,說明父級應(yīng)該是全選狀態(tài);如果子級的數(shù)≠子級選中的數(shù)量且子級選中的數(shù)量>0,就是半選狀態(tài);如果子級選中的數(shù)量等于0,就是未選狀態(tài)。
所以我們在點擊三個按鈕時,要先記錄下tree1~6值,我們新建幾個文本標(biāo)簽,默認(rèn)隱藏,只用于邏輯交互,然后用設(shè)置文本的交互,將值設(shè)置到對應(yīng)文本標(biāo)簽里。
在更新行之后,我們要根據(jù)點擊所在的層級進(jìn)行篩選,例如是在第6級,我們就用篩選的交互,將該節(jié)點的父級,就是5級下面所有的子節(jié)點篩選出來。
篩選出來之后,我們就進(jìn)行上述的判斷了,但是這里我們還要統(tǒng)計一下選中數(shù)。
我們新增一個文本標(biāo)簽,默認(rèn)隱藏,用來記錄選中數(shù),在中繼器每項加載時,如果是第一行,我們用設(shè)置文本的交互,將他的值設(shè)置為0,這相當(dāng)于設(shè)置初始值。
如果xuanzhong列的值為全選,我們就用設(shè)置文本的交互,將記錄選中數(shù)的值為原來的值+1,這樣就可以實時統(tǒng)計出選中了多少行。
這樣我們就可以開始進(jìn)行條件比較了,這里用到visibleitemcount函數(shù),這個函數(shù)可以統(tǒng)計出篩選之后的函數(shù),相當(dāng)于篩選出來的子級數(shù)。
如果子級的數(shù)=子級選中的數(shù)量,說明父級應(yīng)該是全選狀態(tài),我們用更新行的交互,將父級節(jié)點選中列的值更新為選中;
如果子級的數(shù)≠子級選中的數(shù)量且子級選中的數(shù)量>0,就是半選狀態(tài),我們用更新行的交互,將父級節(jié)點選中列的值更新為選半選;
如果子級選中的數(shù)量等于0,就是未選狀態(tài),我們用更新行的交互,將父級節(jié)點選中列的值更新為未選。
判斷完6級的父節(jié)點(5級),接下來判斷54321級節(jié)點也是同樣道理,根據(jù)不同節(jié)點層級用同樣的方法就可以完成了。
這樣我們就完成了用中繼器表格制作多選樹了,下次使用時,我們只需要修改中繼器表格里數(shù)據(jù),就可以生成含交互效果的多選樹了。因為這個原型我們用中繼器制作的,后續(xù)我們也可以根據(jù)需要,增加交互效果,例如動態(tài)增加、刪除、修改節(jié)點、搜索節(jié)點、頁面跳轉(zhuǎn)、篩選其他中繼器等內(nèi)容,大家可以根據(jù)需要自由添加。
那以上就是本期教程的全部內(nèi)容,感興趣的同學(xué)們可以動手試試哦,感謝您的閱讀,我們下期見。
本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
7. 反選的交互 這塊內(nèi)容沒有說清楚