今天，教大家如何做可以增刪改的多選樹，以及節點與節點之間相互交互的內容。enjoy~

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

一、效果介紹

功能介紹：

展開/收起：點擊箭頭，可以展開或收起子節點。

添加子節點：點擊添加子節點按鈕，可添加子節點，并在本節點自動生成箭頭，如果本節點下方有內容，自動打開內容。

添加同級節點：點擊添加同級節點按鈕，可添加同級節點。

刪除節點：點擊刪除節點按鈕：刪除該節點和該節點的子節點，如果該節點父節點只有該子節點，父節點箭頭自動消失。

修改節點內容：點擊文字可以修改內容。

選中：選中當前節點和該節點的子節點，如果同級節點全部選中，同時選中父節點。

取消選中：取消選中當前節點和該節點的子節點，同時取消選中父節點。

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

編輯默認樹列表：在中級器內填寫即可，簡單實用。

二、使用方法

在中繼器中編輯：

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

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

三、制作方法

樹形結構的制作，請參考我上一篇文章——可增刪改的樹形結構

今天主要講一下如何將樹形結構制作成多選樹。

（1）邏輯思路

中繼器內增加一列選中，當值為1是，選中多選框；否則，取消選中多選框。

選中當前節點時，不僅要選中當前節點，還要選中該節點的所有子節點，如果同級節點全部選中，同時選中父節點。

取消選中節點是，不僅要取消當前的節點，還要取消該節點的子節點，同時取消選中父節點。

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

（2）中繼器內材料

在原有的樹形結構里加一個多選框，可以使用系統默認的，也可以使用自己制作的美化多選框。

（3）具體交互

選中：

取消選中：

總結

該原型非常實用，但制作相對復雜，新手不容易完成。

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

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議