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

2021-10-10 06:32:49 字數 2875 閱讀 2754

工具/原料:

中繼器核取方塊

下拉符號

選中按鈕

取消選中按鈕

展開按鈕

收起按鈕

1級文字標籤

2級文字標籤

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

設定取消選中按鈕滑鼠單擊時事件

如果type文字標籤=1,更新行條件[[item.memu1==a]],更新xuanzhong=0。

如果type文字標籤=2,更新行條件[[item.memu1==a&&item.memu2==b]],更新xuanzhong=0。更新行條件[[item.memu1==a&&item.memu2==」&&item.memu3==」]],更新xuanzhong=0。

如果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文字標籤設定為隱藏。

Axure 中繼器的使用

1 中繼器 repeater 的介紹 相當於程式開發中的小型資料庫,用於存放同種結構的資料,可對其中的資料進行刪除 增加與更新,以及根據設定好的條件對程現的資料組進行過濾等操作,學習它的使用有助於我們快速設計一些複雜的互動介面。注 因作為測試,目前只是對工具的了解和稍會使用即可,暫時不做深入的研究與...

Axure的中繼器如何實現兩個列表之間的互動

將中文語言包下的lang資料夾直接放在安裝axure的根目錄下,重啟axure。開啟axure後,搜尋中繼器,找到後直接拖到頁面中。選中中繼器在右側定義中繼器的名稱為列表左,在屬性欄下面新增column0和column1兩列 支援重新命名 兩個列表分別賦值。如下圖所示 選中剛才的中繼器複製乙個,移動...

Axure8 0 中繼器學習

中繼器可用於顯示重複列表項。雙擊中繼器,進入中繼器的內部編輯區。新拖入的中繼器預設有乙個矩形。在中繼器的內部編輯區中,要先建立列表項的模板內容。這個模板內容決定每乙個列表項中的元件組成結構。資料集中資料行的數量與中繼器顯示的列表項的數量相一致。中繼器列表項顯示的文字內容與資料集對應。可通過設定 屬性...