Axure 教程:可增刪改的多選樹
今天,教大家如何做可以增刪改的多選樹,以及節點與節點之間相互交互的內容。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協議
最新版原型預覽及下載地址:
https://axhub.im/ax9/b3db3743977d8b2e/#g=1
原型預覽及下載地址:
https://axhub.im/pro/64d86337a1214330