本文給大家介紹用一個中繼器實現axure多選樹的效果，一起來看看~

原型預覽地址http://rzcfi5.axshare.cn/#g=1&p=新元件1

工具/原料：

1. 中繼器
2. 復選框
3. 下拉符號
4. 選中按鈕
5. 取消選中按鈕
6. 展開按鈕
7. 收起按鈕
8. 1級文本標簽
9. 2級文本標簽
10. type文本標簽

步驟1

添加中繼器：在中繼器里放入下拉符號和多選框。

步驟二

設置中繼器：

type：分1、2、3三個級別，1表示一級（如廣東?。?，2表示二級（如廣東省—廣州市），3表示（廣東省-廣州市-海珠區）。

memu1：表示第一級菜單

memu2：表示第二級菜單

memu3：表示第三級菜單

xiala：1表示有下拉符號，0表示沒有下拉符號

see：1表示可見，0表示隱藏

xuan：下拉符號的方向，0向右，1向下

xuanzhong：1表示選擇，0表示未選中

步驟3

設置中繼器載入時交互事件。

添加篩選[[Item.see==’1′]]：篩選出see為1（可見）的行

步驟4

設置中繼器每項加載時交互事件。

（1）設置多選框文本和位置

如果是一級菜單，設置多選框文字=memu1

如果是二級菜單，設置多選框文字=memu2，并且移動下拉符號和多選框組合向右移動20

如果是三級菜單，設置多選框文字=memu3，并且移動下拉符號和多選框組合向右移動40

（2）設置下拉符號

如果xiala=0，隱藏下拉符號。

如果xuan=0，下拉符號向右，表示收起下級菜單

如果xuan=1，下拉符號向上，表示打開下級菜單

（3）設置選中

如果xuanzhong=1，選中該行多選框。

步驟5

設置下拉符號鼠標單擊時事件：

如果xuan=0，更新行this，列xuan=1。設置文本1級文本標簽=memu1，2級文本標簽=memu2，出發鼠標單擊展開按鈕。

如果xuan=1，更新行this，列xuan=0。設置文本1級文本標簽=memu1，2級文本標簽=memu2，出發鼠標單擊收起按鈕。

步驟6

設置展開按鈕鼠標單擊時事件：

如果2級文本標簽為空，更新行條件[[Item.type==’2’&&Item.memu1==a]]，更新see=1；

如果2級文本不為空。更新行條件，[[Item.type==’3’&&Item.memu1==a&&Item.memu2==b]]，更新see=0。

步驟7

設置收起按鈕鼠標單擊時事件：

如果2級文本標簽為空，更新行條件[[Item.type!=’1’&&Item.memu1==a]]，更新see=0，xuan=0；

如果2級文本不為空。更新行條件，[[Item.type==’3’&&Item.memu1==a&&Item.memu2==b]]，更新see=0。

步驟8

設置多選框事件：

選中時，更新行this，列選中=1，設置文本1級文本標簽=memu1，2級文本標簽=memu2，type文本標簽=type，觸發鼠標單擊選中按鈕的事件。

取消選中時，更新行this，列選中=0，設置文本1級文本標簽=memu1，2級文本標簽=memu2，type文本標簽=type，觸發鼠標單擊取消選中按鈕的事件。

步驟9

設置選中按鈕鼠標單擊時事件：

如果type文本標簽=1，更新行條件[[Item.memu1==a]]，更新xuanzhong=1。

如果type文本標簽=2，更新行條件[[Item.memu1==a&&Item.memu2==b]]，更新xuanzhong=1。

步驟10

設置取消選中按鈕鼠標單擊時事件

1. 如果type文本標簽=1，更新行條件[[Item.memu1==a]]，更新xuanzhong=0。
2. 如果type文本標簽=2，更新行條件[[Item.memu1==a&&Item.memu2==b]]，更新xuanzhong=0。更新行條件[[Item.memu1==a&&Item.memu2==”&&Item.memu3==”]]，更新xuanzhong=0。
3. 如果type文本標簽=3，更新行條件[[Item.memu1==a&&Item.memu2==b&&Item.memu3==”]]，更新xuanzhong=0，更新行條件。[[[Item.memu1==a&&Item.memu2==”&&Item.memu3==”]]，更新xuanzhong=0。

步驟11

取消選中按鈕、選中按鈕、收起按鈕、展開按鈕、1級文本標簽、?2級文本標簽、type文本標簽設置為隱藏。

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

題圖來自Unsplash，基于CC0協議