classification: 實(shí)戰(zhàn)axure
title: 使用repeater實(shí)現(xiàn)一個(gè)復(fù)雜的樹狀結(jié)構(gòu)
author: BigPolo
Date: 2020年12月1日

axure中使用repeater實(shí)現(xiàn)一個(gè)復(fù)雜的樹狀結(jié)構(gòu)

1. 樹形結(jié)構(gòu)需求

這個(gè)樹狀結(jié)構(gòu)是Jeecg Boot架構(gòu)中的一個(gè)樹狀結(jié)構(gòu)，具體需求為：

1. 實(shí)現(xiàn)樹狀結(jié)構(gòu)的分級并能進(jìn)行逐級展開與收起操作；
2. 復(fù)選框進(jìn)行多選操作；
3. 文字實(shí)現(xiàn)點(diǎn)擊單選操作；
4. 可以進(jìn)行新增、刪除、修改等操作；
5. 當(dāng)選擇部分下級節(jié)點(diǎn)時(shí)，上級節(jié)點(diǎn)顯示為部分選擇狀態(tài)；當(dāng)選擇全部下級節(jié)點(diǎn)，上級節(jié)點(diǎn)顯示為選中狀態(tài)；當(dāng)取消所有下級節(jié)點(diǎn)選擇時(shí)，上級節(jié)點(diǎn)顯示為未選中狀態(tài)；
6. 當(dāng)選中上級節(jié)點(diǎn)時(shí)，其所有下級節(jié)點(diǎn)自動(dòng)更新為選中狀態(tài)；當(dāng)取消選中上級節(jié)點(diǎn)時(shí)，其所有下級節(jié)點(diǎn)自動(dòng)更新為未選中狀態(tài)。

4.5.6.三個(gè)需求因?yàn)閷?shí)現(xiàn)起來比較復(fù)雜，對于原型階段實(shí)現(xiàn)的投入產(chǎn)出比不高，所以本文主要討論前三個(gè)需求，另外當(dāng)樹狀結(jié)構(gòu)的節(jié)點(diǎn)級別太多，需要遍歷算法，實(shí)在是有些為難axure和原型設(shè)計(jì)人員（作者）了，為了少死腦細(xì)胞，本文的樹形結(jié)構(gòu)只實(shí)現(xiàn)三級樹狀結(jié)構(gòu)，也沒有用復(fù)雜的算法。

2. 準(zhǔn)備組件

整個(gè)樹狀結(jié)構(gòu)的組件如下圖所示：

組件組成

組件的擺放如圖所示：

組件擺放

其中repeater內(nèi)的組件擺放如下圖：

repeater組件擺放

1. repeater

   repeater的主要功能用以加載樹狀結(jié)構(gòu)的各項(xiàng)數(shù)據(jù)，并實(shí)現(xiàn)樹形結(jié)構(gòu)的展示。

   repeater的數(shù)據(jù)結(jié)構(gòu)在下一節(jié)中介紹。本節(jié)主要介紹組件構(gòu)成。

   主要包括一個(gè)箭頭組件、一個(gè)checkbox組件和一個(gè)label組件。

   這幾個(gè)組件可以用axure自帶的組件庫，也可以自行設(shè)計(jì)，為了相對美觀，我采用了自己設(shè)計(jì)的箭頭組件和checkbox組件。

   1.1. 箭頭組件

箭頭組件我采用動(dòng)態(tài)面板中加載圖形的方式。

箭頭組件

動(dòng)態(tài)面板分為兩個(gè)狀態(tài)：down和right，分別代表展開模式和收起模式。

其實(shí)箭頭組件可以直接用一個(gè)圖片實(shí)現(xiàn)，通過組件的rotate方法實(shí)現(xiàn)兩種狀態(tài)，我這種方式主要是個(gè)人習(xí)慣，認(rèn)為動(dòng)態(tài)面板能夠更靈活的操作組件。

動(dòng)態(tài)面板設(shè)置為fit to content，其實(shí)這里不設(shè)置也無所謂，因?yàn)閮蓮垐D片的大小一致。

1.2. checkbox組件

同樣checkbox用圖片設(shè)計(jì)，之所以沒有用axure自帶的checkbox，主要是因?yàn)閭€(gè)人認(rèn)為axure的checkbox有點(diǎn)丑，難以達(dá)到界面要求。

根據(jù)需求設(shè)置三種樣式效果：

check的樣式效果

1.3. label組件

label組件可以直接用axure自帶的組件，根據(jù)需求設(shè)置字體大小顏色等。

同樣設(shè)置兩種樣式效果：

label的樣式效果

2. 動(dòng)態(tài)面板

在樹狀結(jié)構(gòu)中有一個(gè)命名為pnl-control的動(dòng)態(tài)面板，它是作為repeater外部的控制組件存在，根據(jù)需求設(shè)計(jì)了五個(gè)狀態(tài)，可以實(shí)現(xiàn)三級節(jié)點(diǎn)的操作，如果需要更多節(jié)點(diǎn)的操作，需要添加更多的狀態(tài)。各個(gè)狀態(tài)的作用及如何設(shè)置事件請接著往下看。

pnl-control的狀態(tài)

3. label組件

在樹形結(jié)構(gòu)中有兩個(gè)label組件，它們的作用主要是為repeater傳遞控制參數(shù)，兩個(gè)參數(shù)主要是當(dāng)前的節(jié)點(diǎn)名稱和節(jié)點(diǎn)級別（不要糾結(jié)命名）。

3. 實(shí)現(xiàn)步驟

3.1. 實(shí)現(xiàn)樹狀結(jié)構(gòu)分級并進(jìn)行展開收起操作

step1.

設(shè)置repeater的數(shù)據(jù)結(jié)構(gòu)和 Item Loaded事件，實(shí)現(xiàn)樹狀結(jié)構(gòu)布局。

1. repeater的數(shù)據(jù)結(jié)構(gòu)

repeater的數(shù)據(jù)結(jié)構(gòu)

前三個(gè)參數(shù)主要是節(jié)點(diǎn)名稱，我采用了笨辦法，對各級節(jié)點(diǎn)需要將它的所有上級節(jié)點(diǎn)列出；

level字段代表當(dāng)前節(jié)點(diǎn)的級別；

icn_sta字段代表當(dāng)前節(jié)點(diǎn)的箭頭組件狀態(tài)，其中d代表展開狀態(tài)，箭頭向下；r代表收起狀態(tài)，箭頭向右；n代表隱藏箭頭不顯示。初始化的數(shù)據(jù)我默認(rèn)為樹狀結(jié)構(gòu)是展開狀態(tài)，所以所有的icn_sta字段都是d或者n，沒有r狀態(tài)。

isshown字段代表是否隱藏當(dāng)前節(jié)點(diǎn)。

2. 設(shè)置repeater的item loaded事件

截屏2020-12-03 上午9.35.00.png

事件由四部分組成，第一部分根據(jù)節(jié)點(diǎn)級別加載節(jié)點(diǎn)文字并設(shè)置文字label的尺寸

加載節(jié)點(diǎn)文字+設(shè)置尺寸

第二部分根據(jù)節(jié)點(diǎn)級別進(jìn)行縮進(jìn)

縮進(jìn)設(shè)置

第三部分設(shè)置箭頭組件的狀態(tài)

箭頭組件顯示狀態(tài)

第四部分則確定是否應(yīng)該顯示該節(jié)點(diǎn)

是否隱藏（收縮）該節(jié)點(diǎn)

step2.

設(shè)置repeater的控制組件（動(dòng)態(tài)面板）的panel state changed事件，通過外部組件實(shí)現(xiàn)對repeater的數(shù)據(jù)更新，實(shí)現(xiàn)樹狀結(jié)構(gòu)的展開收起效果。

在step1中只是初始化樹狀結(jié)構(gòu)，這一步則是為樹狀結(jié)構(gòu)制造一個(gè)開關(guān)，當(dāng)觸發(fā)這個(gè)開關(guān)的時(shí)候，樹狀結(jié)構(gòu)實(shí)現(xiàn)展開/收起樣式的變化。

在準(zhǔn)備組件中我們創(chuàng)建了一個(gè)名為pnl-control的動(dòng)態(tài)面板，我們就通過這個(gè)動(dòng)態(tài)面板狀態(tài)的改變，來實(shí)現(xiàn)展開/收起操作。

為pnl-control創(chuàng)建panel state changed事件，當(dāng)動(dòng)態(tài)面板的狀態(tài)發(fā)生改變時(shí)更新repeater的數(shù)據(jù)并重新加載。

pnl-control的panel state changed事件

其中兩個(gè)局部變量LVAR1和LVAR2分別代表當(dāng)前節(jié)點(diǎn)級別和當(dāng)前節(jié)點(diǎn)名稱兩個(gè)label組件的文字值。

局部變量設(shè)置

step3.

設(shè)置repeater組件中箭頭組件的click or tap事件，實(shí)現(xiàn)樹狀結(jié)構(gòu)的展開收起操作。

前兩步實(shí)現(xiàn)了樹狀結(jié)構(gòu)的展示方式和開關(guān)，這一步就用以實(shí)現(xiàn)什么時(shí)候，怎么去觸發(fā)開關(guān)。

分別定義repeater中的展開/收起動(dòng)態(tài)面板中的（兩個(gè)?。﹫D片的click or tap事件。

down狀態(tài)下箭頭圖片點(diǎn)擊操作：

down狀態(tài)下圖片的點(diǎn)擊事件

1. 首先實(shí)現(xiàn)向節(jié)點(diǎn)名稱和節(jié)點(diǎn)級別兩個(gè)label的參數(shù)傳遞；
2. 然后更新repeater的箭頭狀態(tài)字段；
3. 最后改變pnl-control面板狀態(tài)，觸動(dòng)pnl-control開關(guān)，更新當(dāng)前節(jié)點(diǎn)的各種顯示狀態(tài)，實(shí)現(xiàn)樹狀結(jié)構(gòu)的展開/收起操作。

同理，設(shè)置right狀態(tài)下箭頭圖片的點(diǎn)擊事件。

現(xiàn)在可以預(yù)覽設(shè)計(jì)的樹狀結(jié)構(gòu)，看看它的展開、收起操作了！

樹狀結(jié)構(gòu)的展開效果

3.2. 實(shí)現(xiàn)復(fù)選框的多選操作與文字的單選操作

復(fù)選框的多選操作很簡單，只要設(shè)置好checkbox的樣式效果，設(shè)置click or tap事件

checkbox的點(diǎn)擊事件

文字的單選操作稍微復(fù)雜一些，在設(shè)置好label的樣式效果和click or tap事件后，還需要為label創(chuàng)建selection group:

repeator中文字label組件的交互設(shè)置

??：最重要的是要在repeater交互屬性中取消掉isolate radio groups和isolate selection groups兩個(gè)選項(xiàng)的勾選，不然無法實(shí)現(xiàn)單選操作！

repeater選擇組設(shè)置

4. 實(shí)現(xiàn)效果

最終的實(shí)現(xiàn)效果

我不會錄屏，只能截圖，其中食堂顏色變化是因?yàn)槭髽?biāo)懸停在上邊。

5. 總結(jié)

在實(shí)現(xiàn)過程中遇到不少問題，一開始想不出解決方案，所以在制作的原型中最終選擇了最原始的樹狀結(jié)構(gòu)設(shè)計(jì)，就是采用傳統(tǒng)的組件的show/hide方法逐個(gè)在原型增加組件，所以一個(gè)像模像樣的樹狀結(jié)構(gòu)要非常大量的組件才能實(shí)現(xiàn)，最后對axure的repeater組件深入思考后才在給客戶交付原型后想明白，最終實(shí)現(xiàn)了這個(gè)樹形結(jié)構(gòu)的設(shè)計(jì)。

問題一. 為什么不在repeater內(nèi)的箭頭組件的click or tap事件中直接實(shí)現(xiàn)展開收起操作？

問題二. 為什么要在控制組件中的每個(gè)數(shù)據(jù)操作狀態(tài)后都增加一個(gè)跳轉(zhuǎn)到空狀態(tài)的方法實(shí)例？

其實(shí)這個(gè)樹狀結(jié)構(gòu)還是有缺陷的，比如當(dāng)進(jìn)行選中操作后緊接著進(jìn)行展開/收起操作，所有的選中狀態(tài)都會被清除，其實(shí)也能夠解決這個(gè)問題，增加repeater的控制數(shù)據(jù)就可以，但是覺得作為給甲方演示的組件，關(guān)鍵部分的設(shè)計(jì)展示出來就完全可以了。

當(dāng)然，這個(gè)樹狀結(jié)構(gòu)還可以不斷完善，實(shí)現(xiàn)諸如展開時(shí)向下推下方的組件，收起時(shí)拉下方的組件，或者將樹狀結(jié)構(gòu)限定在一定顯示范圍等等，這需要根據(jù)操作需求進(jìn)行進(jìn)一步設(shè)計(jì)。