今天，教大家如何做可以增刪改的多選樹，以及節(jié)點(diǎn)與節(jié)點(diǎn)之間相互交互的內(nèi)容。enjoy~

演示地址：http://bra8my.axshare.cn/#g=1&p=可增刪改的多選樹

一、效果介紹

功能介紹：

展開/收起：點(diǎn)擊箭頭，可以展開或收起子節(jié)點(diǎn)。

添加子節(jié)點(diǎn)：點(diǎn)擊添加子節(jié)點(diǎn)按鈕，可添加子節(jié)點(diǎn)，并在本節(jié)點(diǎn)自動(dòng)生成箭頭，如果本節(jié)點(diǎn)下方有內(nèi)容，自動(dòng)打開內(nèi)容。

添加同級(jí)節(jié)點(diǎn)：點(diǎn)擊添加同級(jí)節(jié)點(diǎn)按鈕，可添加同級(jí)節(jié)點(diǎn)。

刪除節(jié)點(diǎn)：點(diǎn)擊刪除節(jié)點(diǎn)按鈕：刪除該節(jié)點(diǎn)和該節(jié)點(diǎn)的子節(jié)點(diǎn)，如果該節(jié)點(diǎn)父節(jié)點(diǎn)只有該子節(jié)點(diǎn)，父節(jié)點(diǎn)箭頭自動(dòng)消失。

修改節(jié)點(diǎn)內(nèi)容：點(diǎn)擊文字可以修改內(nèi)容。

選中：選中當(dāng)前節(jié)點(diǎn)和該節(jié)點(diǎn)的子節(jié)點(diǎn)，如果同級(jí)節(jié)點(diǎn)全部選中，同時(shí)選中父節(jié)點(diǎn)。

取消選中：取消選中當(dāng)前節(jié)點(diǎn)和該節(jié)點(diǎn)的子節(jié)點(diǎn)，同時(shí)取消選中父節(jié)點(diǎn)。

修改添加默認(rèn)提示語：enter text……可在原型內(nèi)的”提示語”文本框，修改內(nèi)容即可。

編輯默認(rèn)樹列表：在中級(jí)器內(nèi)填寫即可，簡(jiǎn)單實(shí)用。

二、使用方法

在中繼器中編輯：

• no：第n個(gè)一級(jí)內(nèi)容就寫a00000000，例如第一個(gè)一級(jí)內(nèi)容：100000000；第a個(gè)一級(jí)內(nèi)容下的第b個(gè)二級(jí)內(nèi)容就寫a0b000000（n>9時(shí)，mn000000）；以此類推，6級(jí)內(nèi)容為小數(shù)點(diǎn)后面的數(shù)。
• column：幾級(jí)內(nèi)容就在幾級(jí)column里填寫。
• jiantou：左邊的展開箭頭，1代表顯示，其他代表隱藏。
• see：1代表顯示，其他代表隱藏。
• xuan：箭頭的方向,1代表向下，其他代表向右。
• xuanzhong：代表多選框是否選中，1代表選中，其他代表未選中。

修改添加默認(rèn)提示語：enter text…可在原型內(nèi)的”提示語”文本框，修改內(nèi)容即可。

三、制作方法

樹形結(jié)構(gòu)的制作，請(qǐng)參考我上一篇文章——可增刪改的樹形結(jié)構(gòu)

今天主要講一下如何將樹形結(jié)構(gòu)制作成多選樹。

（1）邏輯思路

中繼器內(nèi)增加一列選中，當(dāng)值為1是，選中多選框；否則，取消選中多選框。

選中當(dāng)前節(jié)點(diǎn)時(shí)，不僅要選中當(dāng)前節(jié)點(diǎn)，還要選中該節(jié)點(diǎn)的所有子節(jié)點(diǎn)，如果同級(jí)節(jié)點(diǎn)全部選中，同時(shí)選中父節(jié)點(diǎn)。

取消選中節(jié)點(diǎn)是，不僅要取消當(dāng)前的節(jié)點(diǎn)，還要取消該節(jié)點(diǎn)的子節(jié)點(diǎn)，同時(shí)取消選中父節(jié)點(diǎn)。

我們通過更新中繼器xuanzhong的值，來控制選中和取消選中

（2）中繼器內(nèi)材料

在原有的樹形結(jié)構(gòu)里加一個(gè)多選框，可以使用系統(tǒng)默認(rèn)的，也可以使用自己制作的美化多選框。

（3）具體交互

選中：

取消選中：

總結(jié)

該原型非常實(shí)用，但制作相對(duì)復(fù)雜，新手不容易完成。

制作完成后，以后使用方便，僅需簡(jiǎn)單填寫樹中繼器的內(nèi)容，即可擁有完美的效果，所以強(qiáng)烈推薦給各位使用。

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

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