Axure 教程:可增刪改的多選樹

2 評論 6962 瀏覽 22 收藏 6 分鐘

今天,教大家如何做可以增刪改的多選樹,以及節點與節點之間相互交互的內容。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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 最新版原型預覽及下載地址:
    https://axhub.im/ax9/b3db3743977d8b2e/#g=1

    來自廣東 回復
  2. 原型預覽及下載地址:
    https://axhub.im/pro/64d86337a1214330

    來自廣東 回復