如何利用中繼器實現Axure多選樹效果?

13 評論 19158 瀏覽 27 收藏 7 分鐘

本文給大家介紹用一個中繼器實現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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 怎么加你的公眾號

    來自陜西 回復
    1. Axure高保真原型

      來自廣東 回復
  2. 提個小BUG,當2級菜單下的所有三級菜單都被勾選后,相對應的2級菜單是不是也應該是選中的狀態?我用單選按鈕組合的方式也試著做了下,在某些邏輯上也會有些問題。

    來自四川 回復
    1. 是的,這個是幾年前的教程了,現在都基本上不用了。你可以到我公眾號里面看看,有最新的效果,包含增刪改查正選反選的效果

      來自廣東 回復
  3. 沒有明白,1級文本標簽、?2級文本標簽是怎么來的

    來自湖北 回復
  4. 從第五步開始就懵了,取消選中按鈕、選中按鈕、收起按鈕、展開按鈕、1級文本標簽、?2級文本標簽、type文本標簽這些要怎么放置的?放在中繼器內還是外?可以發個rp文件嗎

    來自廣東 回復
    1. 有需要可以自己下載,原型預覽及下載地址:
      https://axhub.im/pro/efa8c9753e4a8038

      來自廣東 回復
  5. 上面的a和b是變量嗎,是怎么出現的?

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

    來自廣東 回復
  7. 哈,看完還是不太會?你可能需要從Axure基礎開始學

    這里推薦你加Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:原型禮包

    :mrgreen: 領取適合產品新人的原型設計大禮包哦,cc還會不定期分享Axure免費視頻課程呢!

    來自廣東 回復
  8. 可以給一下rp文件嗎,沒有做出想要的效果

    來自江蘇 回復
  9. 能不能給一份rp文件呀,按照步驟弄了,但是沒有實現效果想看看問題出在哪里了

    來自廣東 回復
    1. hello,你有帶復選框的樹狀菜單嗎

      來自江蘇 回復