中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

樹結(jié)構(gòu)是原型設(shè)計中常用的控件之一，常用于組織架構(gòu)等功能。本文作者參照釘釘后臺組織架構(gòu)樣式，使用Axure中繼器實現(xiàn)動態(tài)樹結(jié)構(gòu)控件。

一、交互樣式

初始樣式（以釘釘后臺-通訊錄-組織架構(gòu)為例）：

初始載入時，僅顯示父節(jié)點；

添加子部門后，父節(jié)點出現(xiàn)三角箭頭，且默認展開；

添加3級部門后，對應(yīng)2級部門出現(xiàn)三角箭頭，且默認不展開；

點擊對應(yīng)節(jié)點的的三角箭頭，可切換展示下一級子節(jié)點；

點擊添加子部門，彈出添加子部門彈出框；

點擊編輯，彈出編輯彈出框，可修改部門名稱、刪除部門（父節(jié)點不允許刪除）。

二、基本思路

• 通過節(jié)點序號進行定位與排序；
• 單擊任意節(jié)點時，選中該節(jié)點的同時，記錄該節(jié)點的序號、名稱、下級節(jié)點數(shù)量、父節(jié)點序號；
• 根據(jù)選中節(jié)點判斷該節(jié)點是否允許新增子節(jié)點，修改。

本例的難點在于：

• 新增、編輯、刪除采用彈出框形式，而Axure中繼器本身不支持跨頁面?zhèn)鬟f數(shù)據(jù)，需要采用大量全局函數(shù)做數(shù)據(jù)存儲與傳遞；
• 以判斷當前節(jié)點的父節(jié)點序號為例，需要進行數(shù)據(jù)截取與拼接。

其余交互效果，雖然繁瑣，但難度不大，細心耐心即可。

三、實現(xiàn)步驟

1. 基礎(chǔ)元件-樹結(jié)構(gòu)

1）樹結(jié)構(gòu)-靜態(tài)效果

在Axure畫布中新增組合元件“Node”，構(gòu)成元素：組合元件“Comb”+矩形（未命名，寬352，高40），并調(diào)整到合適大小；

其中組合元件“Comb”構(gòu)成元素為：三角箭頭（Triangle）+動態(tài)面板（Icon）+文本標簽（Tree-DepratmentName）。

動態(tài)面板（Icon）：state1為icon“組織架構(gòu)”、state2為icon“文件夾”；

參照上圖，分別設(shè)置單個元件的交互樣式；

針對組合元件Node設(shè)置選項組：Node；

針對組合元件Node設(shè)置交互效果，單擊時，設(shè)置選中“當前”為真；

新增中繼器“Tree”，將組合元件“Node”復(fù)制其中，并設(shè)置中繼器屬性“隔離列表項之間的選項組”為“不勾選”；

將初始數(shù)據(jù)復(fù)制至中繼器“Tree”中；

初始數(shù)據(jù)如下：

中繼器數(shù)據(jù)列說明：

2）樹結(jié)構(gòu)-初始載入效果

頁面載入時，添加篩選，只顯示Visible=1的數(shù)據(jù)；

根據(jù)Column1-6判斷節(jié)點層級，設(shè)置（Tree-DepratmentName）顯示內(nèi)容、組合元件“Comb”顯示位置；

設(shè)置三角箭頭（Triangle）是否顯示；

即，當該節(jié)點的子節(jié)點個數(shù)=1時，顯示三角箭頭，否則不顯示；

設(shè)置三角箭頭（Triangle）顯示形態(tài)；

當三角箭頭未被選中時，旋轉(zhuǎn)270°；

設(shè)置動態(tài)面板（Icon）顯示內(nèi)容；

3）樹結(jié)構(gòu)-節(jié)點（Node）選中效果

新增全局函數(shù)如下：

設(shè)置單擊樹節(jié)點（Node）時交互：

設(shè)置當前選中；

將已經(jīng)選中的行的“Selected=1”的數(shù)據(jù)更新為不選中，即“Selected=0”；

更新當前行為數(shù)據(jù)選中，即“Selected=1”；

設(shè)置變量值CurrentNo、Subnode、Column1-6；

根據(jù)Column1-6值是否為空，判斷當前節(jié)點所處層級，進而獲取CurrentName、ParrentNo；

設(shè)置中繼器Tree-載入時默認選中初始節(jié)點（即“Selected=1”的節(jié)點）：

4）設(shè)置三角箭頭（Triangle）形態(tài)切換效果

由于點擊三角箭頭（Triangle）時，既需要判斷箭頭當前的形態(tài)（TriangleSelected是否=1），又需要判斷當前節(jié)點所處層級，進一步更新當前節(jié)點子節(jié)點的可見狀態(tài)，為了減少配置量，我們需要先創(chuàng)建兩個文本標簽用于輔助，并添加相關(guān)交互。

新增輔助文本標簽（Assist-閉合時展開Push）、（Assist-展開時收起Pull），并設(shè)為隱藏；

設(shè)定文本標簽（Assist-閉合時展開Push）-單擊時交互：

即：判斷當前箭頭所處的節(jié)點，并更新當前節(jié)點的次級節(jié)點可見狀態(tài)為“1”，即可見：

函數(shù)如下：

當箭頭位于第5級節(jié)點時：

[[TargetItem.No&CurrentNo&TargetItem.No&CurrentNo+100&TargetItem.Column6!=’]]

當箭頭位于第4級節(jié)點時：

[[TargetItem.No&CurrentNo&TargetItem.No&CurrentNo+10000&TargetItem.Column5!=’]]

以此類推。

設(shè)定文本標簽（Assist-展開時收起Pull）-單擊時交互：

即：判斷當前箭頭所處的節(jié)點，更新當前節(jié)點的下所有子節(jié)點（含孫節(jié)點）可見狀態(tài)為“0”，即不可見。更新當前節(jié)點的下所有子節(jié)點（含孫節(jié)點）的三角箭頭狀態(tài)的選中狀態(tài)為“0”，即未選中：

函數(shù)如下：

當箭頭位于第5級節(jié)點時：

[[TargetItem.No&CurrentNo&TargetItem.No&CurrentNo+100]]

當箭頭位于第4級節(jié)點時：

[[TargetItem.No&CurrentNo&TargetItem.No&CurrentNo+10000]]

以此類推。

設(shè)置三角箭頭（Triangle）的交互效果：

單擊時，觸發(fā)事件：Node單擊時

判斷三角箭頭（Triangle）形態(tài)：

當三角箭頭為閉合（Item.TriangleSelected!=1）時，更新當前行的三角狀態(tài)形態(tài)為展開（Item.TriangleSelected=1），并觸發(fā)事件：文本標簽（Assist-閉合時展開Push）單擊時；

當三角箭頭為展開（Item.TriangleSelected=1）時，更新當前行的三角狀態(tài)形態(tài)為閉合（Item.TriangleSelected=0），并觸發(fā)事件：文本標簽（Assist-展開時收起Pull）單擊時

2. 基礎(chǔ)元件-搜索框

在Axure畫布中新增組合元件“Search”，構(gòu)成元素：Icon（Delete）+ Icon（Search）+文本框（Search），并調(diào)整至合適大?。?/p>

設(shè)置Icon（Delete）為隱藏；

設(shè)置文本框（Search）交互如下：

即當文本框（Search）文字不為空時，顯示Icon（Delete），否則隱藏Icon（Delete）。

設(shè)置Icon（Delete）交互如下：

即單擊Icon（Delete）時，設(shè)置文本框（Search）文字為空，并隱藏Icon（Delete）。

3. 基礎(chǔ)元件-按鈕

參考源文件，不詳述。

4. 基礎(chǔ)元件-彈出框-新增/編輯

參考源文件，不詳述。

5. 動態(tài)效果-模糊查詢

設(shè)置文本框（Search）-文本改變時：

當文字不為空，顯示Icon（Delete），添加篩選：模糊匹配。

當文字為空，隱藏Icon（Delete）,添加篩選：只顯示只顯示Item.Visible=1的數(shù)據(jù)。

6. 增加子節(jié)點

設(shè)置按鈕-添加子部門（Button-Add）載入時效果，判斷當前選中節(jié)點是否位于第6級節(jié)點，若是，不顯示添加子部門按鈕；

設(shè)置選中子節(jié)點時觸發(fā)事件：按鈕-添加子部門（Button-Add）載入時；

單擊時按鈕-添加子部門（Button-Add）時，顯示動態(tài)面板（Add&Edit），并設(shè)置動態(tài)面板狀態(tài)為state1；

設(shè)置動態(tài)面板（Add&Edit）顯示時效果，

即：當動態(tài)面板可見且面板狀態(tài)=state1時，設(shè)置文本標簽（AddParmentName）為當前選中節(jié)點名稱，設(shè)置文本標簽（AddDepartmentName）為空，并設(shè)置焦點于文本標簽（AddDepartmentName）；

當動態(tài)面板可見且面板狀態(tài)=state2時，設(shè)置文本標簽（EditDepartmentName）為當前選中節(jié)點名稱，并設(shè)置焦點于文本標簽（EditDepartmentName）（Ps.此處非常遺憾由于中繼器限制，無法通過ParmentNo獲取到當前節(jié)點父節(jié)點的名稱）；

設(shè)置state1-取消按鈕交互；

設(shè)置state1-確定按鈕交互，單擊時向中繼器（Tree）中添加一行，詳細如下：

判斷當前所選節(jié)點（上級部門）所處層級，

當上級部門位于第6級節(jié)點時，不做處理（最多只支持6級節(jié)點，當處于第6級節(jié)點數(shù)時，已對按鈕-添加子部門（Button-Add）做了隱藏處理）。

當上級部門位于第5級節(jié)點時：

更新變量值[[Subnode]]為[[Subnode+1]]，用于計算新增加子節(jié)點的編號；

更新當前節(jié)點的次級子節(jié)點數(shù)量Item.Subnode為[[Subnode]]、箭頭展示形態(tài)Item.TriangleSelected=1(即展開)、子節(jié)點選中狀態(tài)Item.Selected=1（即選中）；

更新當前節(jié)點的次級子節(jié)點展示狀態(tài)為可見；

判斷次級子節(jié)點函數(shù)；

往中繼器（Tree）中插入一行，Item.No值為[[CurrentNo+Subnode]]；

Item.Column6為文本標簽（AddDepartmentName）值；

Item.Visible值為1。

添加排序：

當上級部門位于第4級節(jié)點時：

更新變量值[[Subnode]]為[[Subnode+1]]，用于計算新增加子節(jié)點的編號；

更新當前節(jié)點的次級子節(jié)點數(shù)量Item.Subnode為[[Subnode]]、箭頭展示形態(tài)Item.TriangleSelected=1(即展開)、子節(jié)點選中狀態(tài)Item.Selected=1（即選中）；

更新當前節(jié)點的次級子節(jié)點展示狀態(tài)為可見；

判斷次級子節(jié)點函數(shù)；

往中繼器（Tree）中插入一行，Item.No值為[[CurrentNo+Subnode*100]]；

Item.Column5為文本標簽（AddDepartmentName）值；

Item.Visible值為1。

添加排序：

依次類推，分別設(shè)置當選中節(jié)點位于第3、2、1層級時的處理邏輯；

設(shè)置點擊確定按鈕時，隱藏動態(tài)面板（Add&Edit）；

至此，添加節(jié)點制作完畢。

7. 編輯節(jié)點

設(shè)置按鈕-設(shè)置（Button-Edit）載入時效果，判斷當前選中節(jié)點是否位于第1層級，若是，不顯示設(shè)置按鈕；

設(shè)置選中子節(jié)點時觸發(fā)事件：按鈕-設(shè)置（Button-Add）載入時；

單擊時按鈕-添加設(shè)置（Button-Add）時，顯示動態(tài)面板（Add&Edit），并設(shè)置動態(tài)面板狀態(tài)為state2；

設(shè)置state2-取消按鈕交互；

設(shè)置state2-確定按鈕交互，即單擊時更新中繼器（Tree）數(shù)據(jù)，詳細如下：

判斷當前所選節(jié)點所處層級，

當前選中位于6級節(jié)點時，更新Item.Column6的值為文本標簽（EditDepartmentName）值；

當前選中位于5級節(jié)點時，更新Item.Column5的值為文本標簽（EditDepartmentName）值；

以此類推，分別設(shè)置當選中位于4、3、2、1級節(jié)點時Item.Column4、Item.Column3、Item.Column2、Item.Column1的值。

設(shè)置點擊確定按鈕時，隱藏動態(tài)面板（Add&Edit）；

至此，編輯子節(jié)點制作完畢

8. 刪除節(jié)點

添加動態(tài)面板（Add&Edit）-state2-刪除按鈕交互；

刪除行；

更新變量值[[Subnode]]值為[[Subnode-1]]；

更新父級節(jié)點的次級子節(jié)點數(shù)；

至此，刪除子節(jié)點效果完成。

四、其他

此動態(tài)樹結(jié)構(gòu)可復(fù)用，復(fù)用時，直接替換中繼器（Tree）初始數(shù)據(jù)即可；

根據(jù)當前節(jié)點序號，可以通過拼接的方式計算出父級節(jié)點序號[[ParrentNo]]，但暫未找到方法根據(jù)[[ParrentNo]]獲取父級節(jié)點名稱，導(dǎo)致編輯時，上級部門無法做成動態(tài)；

由于無法根據(jù)當前節(jié)點序號計算出次級節(jié)點個數(shù)，在導(dǎo)入初始數(shù)據(jù)時，需要人工導(dǎo)入次級節(jié)點個數(shù)，并保證數(shù)據(jù)正確；

本案例在制作過程中部分思路參考了《Axure教程：可增刪改的樹型結(jié)構(gòu)》，作者：梓賢vigo。

五、在線演示與源文件下載

1、在線演示地址：https://dd47hs.axshare.com

2、源文件下載地址：

鏈接：https://pan.baidu.com/s/1DtvGK7YWv04GahyfYbIWYw

提取碼：4xt7

3、制作過程詳解導(dǎo)圖：

鏈接：https://pan.baidu.com/s/1zgL4ro6KvtR8zT4mSZE4hA

提取碼：yxad

4、源文件采用Axure9.0制作，若無法打開，請檢查Axure版本。

作者：Pershing，個人公眾號：倉配那些事兒

本文由 @Pershing 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議