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

多選樹常用于展示層級(jí)結(jié)構(gòu)并允許用戶選擇多個(gè)節(jié)點(diǎn)，長在設(shè)置、文件瀏覽器等場景有所使用。那么該如何利用中繼器制作多選樹？本文對(duì)此進(jìn)行了梳理，一起來看看吧。

“多選樹”可能指的是一種用戶界面元素，用于展示層級(jí)結(jié)構(gòu)并允許用戶選擇多個(gè)節(jié)點(diǎn)。這在軟件應(yīng)用程序中常用于設(shè)置、文件瀏覽器等場景。

Axure里面雖然自帶了一個(gè)樹元件，但是并沒有多選的功能，所以今天就教大家如何用中繼器制作一個(gè)多選樹的基礎(chǔ)元件，制作完成后我們只需要填寫表格數(shù)據(jù)，就可以自動(dòng)生成對(duì)應(yīng)的書元件，具體效果如下所示：

一、效果展示

• 點(diǎn)擊箭頭可以展開或者收起子節(jié)點(diǎn)。
• 點(diǎn)擊多選按鈕可以選中或者取消選中當(dāng)前節(jié)點(diǎn)以及子節(jié)點(diǎn)
• 父級(jí)節(jié)點(diǎn)會(huì)根據(jù)子節(jié)點(diǎn)選中情況回顯選中、半選中、未選中的狀態(tài)
• 不同的節(jié)點(diǎn)可以配置不同的圖標(biāo)。

原型地址：https://l8erum.axshare.com/#g=1&p=多選樹_圖標(biāo)版

二、制作教程

1. 材料準(zhǔn)備

我們用到的材料包括中繼器，在中繼器里面還需要一個(gè)透明的背景矩形、箭頭（向下、向右）、圖片元件、文本標(biāo)簽、動(dòng)態(tài)面板、熱區(qū)、多選按鈕（選中、半選、未選中狀態(tài)），如下圖所示擺放：

其中多選按鈕的三個(gè)狀態(tài)要放在同一個(gè)動(dòng)態(tài)面板的3個(gè)state里，分別為未選、半選、全選，后續(xù)通過切換面板狀態(tài)的交互就可以進(jìn)行切換。

向下和向右兩個(gè)箭頭需要放在同一個(gè)動(dòng)態(tài)面板的2個(gè)state里，分別是展開和收起，在里面分別放置向下的箭頭和向右的箭頭。后續(xù)通過切換面板狀態(tài)的交互就可以進(jìn)行切換，如果你們放在動(dòng)態(tài)面板里，那后續(xù)就要改成顯示隱藏的交互。

背景矩形的作用是鼠標(biāo)移入時(shí)變色，和鼠標(biāo)單擊之后選中變色，所以我們要設(shè)置一個(gè)鼠標(biāo)移入的樣式和選中的樣式，具體樣式你們根據(jù)需要設(shè)置就可以了。

熱區(qū)的作用是擴(kuò)大箭頭點(diǎn)擊的范圍。

文字標(biāo)簽增加一個(gè)選中樣式，同樣用于選中后變色的交互，具體樣式你們根據(jù)需要設(shè)置就可以了。

我們把所有元件組合，勾選允許內(nèi)部元件觸發(fā)交互效果的多選按鈕，勾選之后鼠標(biāo)移入這個(gè)組合，背景矩形的懸停樣式就可以自動(dòng)觸發(fā)，而不會(huì)被上方元件擋住。

中繼器表格我們需要以下幾列：

• pic列：鼠標(biāo)右鍵導(dǎo)入該樹節(jié)點(diǎn)對(duì)應(yīng)的圖片即可。
• tree1-tree6列：對(duì)應(yīng)樹節(jié)點(diǎn)的內(nèi)容，可參考下方案例按照樹的層級(jí)填寫即可。案例中最高是6級(jí)的樹，如果需要增加更多層級(jí)，也可以自行添加列和后續(xù)交互。
• jiantou列：控制該節(jié)點(diǎn)是否有箭頭，默認(rèn)有箭頭，如果沒有箭頭就填無箭頭。
• xianshi列：控制該節(jié)點(diǎn)內(nèi)容是否顯示，默認(rèn)顯示，如果默認(rèn)不顯示就填寫隱藏。
• xuanzhuan列：控制該節(jié)點(diǎn)箭頭的方向，默認(rèn)向下打開，如果默認(rèn)向右收起就填寫收起。
• xuanzhong列：控制該節(jié)點(diǎn)是否被選中，一般默認(rèn)為空，即未選狀態(tài)，如果默認(rèn)選中就填寫全選，默認(rèn)半選就填寫半選

這樣材料就設(shè)置好了。

2. 設(shè)置交互

在中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互將中繼器表格里tree列的內(nèi)容設(shè)置都文本標(biāo)簽里。這里就涉及到一個(gè)條件控制的問題了。

我們要先判斷當(dāng)前行內(nèi)容是在哪個(gè)層級(jí)的，所以我們可以根據(jù)tree1-6列的內(nèi)容是否為空來判斷，如果tree6有內(nèi)容，那他就是6級(jí)節(jié)點(diǎn)；如果tree6沒有內(nèi)容，tree5有內(nèi)容，那他就是5級(jí)節(jié)點(diǎn)；如果tree6和tree5都沒有內(nèi)容，但是tree4有內(nèi)容，那他就是4級(jí)節(jié)點(diǎn)……就這樣依次判斷就可以，然后用設(shè)置文本的交互，根據(jù)不同的條件，將tree列的值設(shè)置到文本標(biāo)簽里顯示。

然后我們?cè)谟迷O(shè)置圖片的交互，將pic列的圖片值設(shè)置到圖片元件里。

這樣文本是設(shè)置了，但是層級(jí)沒有出來，因?yàn)樗泄?jié)點(diǎn)都在同一個(gè)垂直面上這時(shí)我們可以用移動(dòng)的交互，如果是1級(jí)的話，改變；如果是2級(jí)的話就向右移動(dòng)20個(gè)單位，；如果是3級(jí)的話就向右移動(dòng)40個(gè)單位……依次類推。

這樣就可以將樹結(jié)構(gòu)設(shè)置出來了，設(shè)置完成之后我們要考慮箭頭顯示的問題了。

如果jiantou列的值等于無箭頭，我們用隱藏的交互，將箭頭所在的動(dòng)態(tài)面板隱藏起來即可。

接下來我們考慮箭頭的方向，箭頭的方向右動(dòng)態(tài)面板來控制，我們可以通過xuanzhuan列的值控制動(dòng)態(tài)面板的狀態(tài)，如果xuanzhuan列的值為收起，我們就用設(shè)置面板狀態(tài)的交互，將動(dòng)態(tài)面板設(shè)置到收起的狀態(tài)。

然后我們考慮折疊的問題，被折疊的節(jié)點(diǎn)需要隱藏，這個(gè)我們通過顯示列來控制，如果顯示列的值等于隱藏，我們就用隱藏的交互，將整個(gè)組合隱藏起來。

最后，我們要控制值哪個(gè)節(jié)點(diǎn)被選中，這里我們用xuanzhong列的值來控制，我們可以直接根據(jù)里面的值，將多選按鈕的面板狀態(tài)設(shè)置到和值一樣，如果為空，就設(shè)置不成功，停留在未選的狀態(tài)里

這樣我們就完成了靜態(tài)的多選樹元件了，下面我們要增加動(dòng)態(tài)的交互。

3. 展開收起子節(jié)點(diǎn)的交互

首先是鼠標(biāo)點(diǎn)擊箭頭后，展開和收起子節(jié)點(diǎn)的交互，我們將交互寫在對(duì)應(yīng)箭頭上方的熱區(qū)里。

如果點(diǎn)擊的是展開箭頭的熱區(qū)，就是當(dāng)前箭頭是展開狀態(tài)，點(diǎn)擊后我們就要將子節(jié)點(diǎn)隱藏起來，這里我們要用更新行的交互，第一個(gè)子節(jié)點(diǎn)將他隱藏，第二個(gè)是更新當(dāng)前節(jié)點(diǎn)的方向。

首先我們要知道當(dāng)前節(jié)點(diǎn)是幾級(jí)節(jié)點(diǎn)，這里的判斷方法和上面的一致，我們將符合條件的，例如當(dāng)前是1級(jí)節(jié)點(diǎn)，我們把所有tree1的值相等的行將他們更新，xianshi列的值更新為隱藏，箭頭方向更新為收起。

上面的條件也會(huì)把當(dāng)前節(jié)點(diǎn)隱藏，所以我們?cè)儆酶滦械慕换?，將?dāng)前行xianshi列的值設(shè)置為顯示，這樣點(diǎn)擊的節(jié)點(diǎn)就不會(huì)隱藏，并且xuanzhuan列的值更新為收起，這樣箭頭面板就會(huì)進(jìn)入收起的state，就是箭頭向右。

其他層級(jí)的節(jié)點(diǎn)也是用同樣的方式依次添加交互即可，寫完展開熱區(qū)的交互，接下來我們寫收起熱區(qū)的交互，其實(shí)思路都是一樣的，方向放過來就可以。

如果點(diǎn)擊的是收起箭頭的熱區(qū)，就是當(dāng)前箭頭是收起狀態(tài)，點(diǎn)擊后我們就要將子節(jié)點(diǎn)顯示起來，這里我們要用更新行的交互，第一個(gè)子節(jié)點(diǎn)將他顯示，第二個(gè)是更新當(dāng)前節(jié)點(diǎn)的方向。

這里需要注意的是，收起的話，我們是收起所有的子節(jié)點(diǎn)，但是展開的話我們只展開下一節(jié)點(diǎn)，例如點(diǎn)擊廣東省，我們只展開到市級(jí)的節(jié)點(diǎn)，不可能點(diǎn)廣東省就把廣東省下面所有區(qū)、街道、多少號(hào)、幾零幾都展開，這樣成千上萬的數(shù)據(jù)，所以我么只展開下一節(jié)點(diǎn)的。

我們用更新行的交互，將符合條件下一節(jié)點(diǎn)的xianshi列的值更新為顯示，例如所在的是1級(jí)節(jié)點(diǎn)，我們的顯示對(duì)應(yīng)的二級(jí)節(jié)點(diǎn)，條件就是ture1的值相同，并且true3、4、5、6的值為空。

更新完子節(jié)點(diǎn)后，我們?cè)俅斡酶滦械慕换?dāng)前節(jié)點(diǎn)xuanzhuan列的值更新為展開，這樣箭頭面板就會(huì)設(shè)置到展開面板，箭頭向下。

其他層級(jí)的節(jié)點(diǎn)也是用同樣的方式依次添加交互即可。

完成了展開收起的效果后，我們還有點(diǎn)擊多選按鈕選中和取消選中的交互。

4. 未選按鈕交互效果

鼠標(biāo)單擊未選按鈕時(shí)，相當(dāng)于要從未選變成全選

同樣我們首先也是要判斷現(xiàn)在是在第幾級(jí)，判斷的方法也是和上面一樣，如果item.tree不等于空，就在第6級(jí)，我們以第六級(jí)為例。單擊未選按鈕時(shí)，相當(dāng)于我們要將他變成全選，所以我們先用更新行的交互，將當(dāng)前行選中列的值更新為選中即可，因?yàn)?級(jí)是案例里最后一級(jí)，所以不需要考慮子級(jí)的問題；

判斷完6級(jí)，如果6級(jí)不成立，我們判斷5級(jí)，如果5級(jí)內(nèi)容不為空，我們要將5級(jí)和對(duì)應(yīng)子級(jí)的內(nèi)容都更新為全選，所以我們用更新行的交互，將tree1-5都相同的行xuanzhong列的值都更新為全選狀態(tài)

后面的5、4、3、2、1也是同理。

5. 半選按鈕交互設(shè)置

鼠標(biāo)單擊未選按鈕時(shí)，相當(dāng)于要從未選變成全選，所以半選按鈕的交互和未選按鈕是一樣的，我們直接用觸發(fā)事件，觸發(fā)未選按鈕的鼠標(biāo)單擊時(shí)的事件即可。

6. 全選按鈕交互設(shè)置

鼠標(biāo)單擊全選按鈕時(shí)，相當(dāng)于要從全選變成未選。

同樣我們首先也是要判斷現(xiàn)在是在第幾級(jí)，判斷的方法也是和上面一樣，如果item.tree不等于空，就在第6級(jí)，我們以第六級(jí)為例。單擊全選按鈕時(shí)，相當(dāng)于我們要將他變成未選，所以我們先用更新行的交互，將當(dāng)前行選中列的值更新為未選即可，因?yàn)?級(jí)是案例里最后一級(jí)，所以不需要考慮子級(jí)的問題。

判斷完6級(jí)，如果6級(jí)不成立，我們判斷5級(jí)，如果5級(jí)內(nèi)容不為空，我們要將5級(jí)和對(duì)應(yīng)子級(jí)的內(nèi)容都更新為未選，所以我們用更新行的交互，將tree1-5都相同的行xuanzhong列的值都更新為未選狀態(tài)。

后面的5、4、3、2、1也是同理。

7. 反選的交互

上面我們已經(jīng)完成了選中、半選、取消選中的交互，但是都是針對(duì)的是本級(jí)和子級(jí)的內(nèi)容，我們并不能進(jìn)行反選父級(jí)。

那如果要反選父級(jí)，我們?cè)谑髽?biāo)單擊三個(gè)按鈕時(shí)，我們我們還需要統(tǒng)計(jì)，該節(jié)點(diǎn)的父節(jié)點(diǎn)下所有的子級(jí)的數(shù)，以及選中的數(shù)量，如果子級(jí)的數(shù)=子級(jí)選中的數(shù)量，說明父級(jí)應(yīng)該是全選狀態(tài)；如果子級(jí)的數(shù)≠子級(jí)選中的數(shù)量且子級(jí)選中的數(shù)量＞0，就是半選狀態(tài)；如果子級(jí)選中的數(shù)量等于0，就是未選狀態(tài)。

所以我們?cè)邳c(diǎn)擊三個(gè)按鈕時(shí)，要先記錄下tree1~6值，我們新建幾個(gè)文本標(biāo)簽，默認(rèn)隱藏，只用于邏輯交互，然后用設(shè)置文本的交互，將值設(shè)置到對(duì)應(yīng)文本標(biāo)簽里。

在更新行之后，我們要根據(jù)點(diǎn)擊所在的層級(jí)進(jìn)行篩選，例如是在第6級(jí)，我們就用篩選的交互，將該節(jié)點(diǎn)的父級(jí)，就是5級(jí)下面所有的子節(jié)點(diǎn)篩選出來。

篩選出來之后，我們就進(jìn)行上述的判斷了，但是這里我們還要統(tǒng)計(jì)一下選中數(shù)。

我們新增一個(gè)文本標(biāo)簽，默認(rèn)隱藏，用來記錄選中數(shù)，在中繼器每項(xiàng)加載時(shí)，如果是第一行，我們用設(shè)置文本的交互，將他的值設(shè)置為0，這相當(dāng)于設(shè)置初始值。

如果xuanzhong列的值為全選，我們就用設(shè)置文本的交互，將記錄選中數(shù)的值為原來的值+1，這樣就可以實(shí)時(shí)統(tǒng)計(jì)出選中了多少行。

這樣我們就可以開始進(jìn)行條件比較了，這里用到visibleitemcount函數(shù)，這個(gè)函數(shù)可以統(tǒng)計(jì)出篩選之后的函數(shù)，相當(dāng)于篩選出來的子級(jí)數(shù)。

如果子級(jí)的數(shù)=子級(jí)選中的數(shù)量，說明父級(jí)應(yīng)該是全選狀態(tài)，我們用更新行的交互，將父級(jí)節(jié)點(diǎn)選中列的值更新為選中；

如果子級(jí)的數(shù)≠子級(jí)選中的數(shù)量且子級(jí)選中的數(shù)量＞0，就是半選狀態(tài)，我們用更新行的交互，將父級(jí)節(jié)點(diǎn)選中列的值更新為選半選；

如果子級(jí)選中的數(shù)量等于0，就是未選狀態(tài)，我們用更新行的交互，將父級(jí)節(jié)點(diǎn)選中列的值更新為未選。

判斷完6級(jí)的父節(jié)點(diǎn)（5級(jí)），接下來判斷54321級(jí)節(jié)點(diǎn)也是同樣道理，根據(jù)不同節(jié)點(diǎn)層級(jí)用同樣的方法就可以完成了。

這樣我們就完成了用中繼器表格制作多選樹了，下次使用時(shí)，我們只需要修改中繼器表格里數(shù)據(jù)，就可以生成含交互效果的多選樹了。因?yàn)檫@個(gè)原型我們用中繼器制作的，后續(xù)我們也可以根據(jù)需要，增加交互效果，例如動(dòng)態(tài)增加、刪除、修改節(jié)點(diǎn)、搜索節(jié)點(diǎn)、頁面跳轉(zhuǎn)、篩選其他中繼器等內(nèi)容，大家可以根據(jù)需要自由添加。

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