Axure高保真教程:多層級動態表格

0 評論 2627 瀏覽 11 收藏 16 分鐘

多層級動態表格是Axure設計中非常實用的一個設計思路。但因為這個設計會涉及到Axure的中繼器等高端操作,很多小伙伴并不是很熟悉。這篇文章,我們手把手教大家怎么做。

多層級表格又成為樹形表格,是在后臺常用的一種表格形式,當表格數據存在多層級關系是,可以通過多層級表格,從而更加清晰的呈現數據內容,幫助人們更好地理解和分析數據之間的關系,從而更加有效地傳遞信息。

所以今天作者就教大家怎么在Axure里制作多層級動態表格,包括展開、折疊、增加、修改、刪除等效果,具體效果如下所示:

一、效果展示

1、可以點擊箭頭展開或者收起子級內容

2、可以動態修改表格內容

3、可以在指定位置動態增加同級節點或子級

4、可以刪除多余的內容

原型地址:https://nme9lo.axshare.com/#g=1&p=樹形表格_增刪改

二、制作教程

1. 材料準備

1.1 表格表頭部分

表頭部分我們用多個矩形組合即可。

1.2 表格內容部分

表格內容部分我們用中繼器制作,中繼器內每格和上面表頭每格的距離一樣。

第一列我們是做樹的結構,包括矩形、箭頭(放在動態面板里的兩個狀態,分別是展開和收起,在里面分別放置向下的箭頭和向右的箭頭)、圖片元件、文本標簽、動態面板、熱區(作用是擴大箭頭點擊的范圍。),如下圖所示擺放:

第2到6列我們用和表頭對應寬度的矩形即可。

最后一列操作列,我們增加幾個圖表,如下圖所示擺放:

然后增加一個背景矩形,作用是鼠標移入時變色,和鼠標單擊之后選中變色,所以我們要設置一個鼠標移入的樣式和選中的樣式,具體樣式你們根據需要設置就可以了。

我們把所有元件組合,勾選允許內部元件觸發交互效果的多選按鈕,勾選之后鼠標移入這個組合,背景矩形的懸停樣式就可以自動觸發,而不會被上方元件擋住。

中繼器表格我們需要以下幾列:

  • no列:代碼第幾行按123456……順序填寫即可,后續用于拆入行的排序
  • tree1-tree6列:對應樹節點的內容,可參考下方案例按照樹的層級填寫即可。案例中最高是6級的樹,如果需要增加更多層級,也可以自行添加列和后續交互。
  • b2-b6列:對應表格里第2到6列顯示的內容
  • jiantou列:控制該節點是否有箭頭,默認有箭頭,如果沒有箭頭就填無箭頭。
  • xianshi列:控制該節點內容是否顯示,默認顯示,如果默認不顯示就填寫隱藏。
  • xuanzhuan列:控制該節點箭頭的方向,默認向下打開,如果默認向右收起就填寫收起。
  • bianse列:控制該節點是否被選中變色,默認未選中,如果需要選中就填寫1。

這樣材料就設置好了。

1.3 添加和修改節點彈窗

我們要做3個彈窗,包括增加同級節點,增加子級節點,修改節點三個,里面主要是用文本標簽、按鈕、輸入框來制作,如下圖所示擺放:

做好之后我們組合轉為動態面板,默認隱藏,固定在屏幕中部。

1.4 刪除節點彈窗

刪除節點彈窗會相對簡單,只需要確定是否刪除即可,我們用矩形、按鈕和文本標簽搭建即可:

2. 設置交互

2.1 設置表格內容

第一列我們要寫一個樹元件的交互,具體的可以參考我之前寫的文章《用中繼器制作樹元件》,里面有詳細的講解怎么用中繼器制作樹元件的效果。

中繼器每項加載時,如果是axure10,我們可以直接點擊中繼器表格的鏈接按鈕,將b2到b6列的值設置的中繼器對應的矩形內容;如果是axure8或9就要用用設置文本的交互,將b2列到b6列對應的內容設置到對應的矩形元件里。

這樣表格的內容就出來了。

2.2 添加子級節點

點擊添加子級按鈕時,例外,我們要新建幾個默認隱藏的文本,用設置文本的交互,記錄tree1到tree6的結構。然后用顯示的交互,將添加同級節點的彈窗顯示出來。

然后想返回節點信息,例如ABC總公司-廣東分公司-財務部這種格式,就要根據所在層級寫條件,用設置文本的交互,設置到對應的元件,這個可做可不做,算是后面的優化。

添加子級節點彈窗里的確認按鈕鼠標單擊時,我們用添加行的交互,將輸入框里的數據,更新到中繼器表格里。

這里就會涉及排序的問題,我們中繼器表格里第一列no就是用于排序的,所以在中繼器載入時,我們用添加排序的交互,對應no列就行升序排列。

那這樣我們就可以通過更新序號,做到在對應位置拆入行。

案例中添加子節點是在所有子節點的最后添加的,所以我們要根據前面記錄到tree1~6來做一個篩選,看看最后一個子節點的序號是多少。

所以我們在中繼器每項加載時,用一個隱藏文本記錄對應的序號。

這樣,就可以記錄到顯示的最后一行的序號,但是默認的是整個表格最后一行的序號,所以我們要先對中繼器進行篩選,例如在ABC總公司-廣東分公司-財務部下方添加新崗位,那我們就對ABC總公司-廣東分公司-財務部進行篩選,就可以得到財務部下方,最后一行數據的序號。所以對于不同的層級,會有不同的篩選條件,我們以第五級為例,因為案例中最高6級,所以第五級是最后一個可以添加子級的層級。

篩選條件就是這個,LVAR1到5就是我們之前記錄tree列的值,TargetItem.tree1==LVAR1&&TargetItem.tree2==LVAR2&&TargetItem.tree3==LVAR3&&TargetItem.tree4==LVAR4&&TargetItem.tree5==LVAR5.

如果是1級就是TargetItem.tree1==LVAR1,2級就是TargetItem.tree1==LVAR1&&TargetItem.tree2,如此類推。

篩選完成獲得最后一行文本之后,那我們用更新行的交互,將對應比no值大的行的no值都加1,例如最后一行是10,那11以后得行,序號就都加1,就變成12、13、14,空出來了一個11。

我們在用添加行的交互,將no+1,例如10+1等于11添加到no列里,然后前面記錄的tree列的值,以及輸入框的值都添加上去即可。這樣就完成添加了。

但是這里還有一個問題,因為添加的是子級,所以不知道父級箭頭的方向,而且如果父級原來沒有子級,就會沒有箭頭,如果默認是收起,新增的這行就應該默認不顯示。

所以我們用一個簡單的方式將,父級行更新為右箭頭和展示,這樣我們還要將父級行下一級的內容設置為默認顯示,這里通過更新行的交互就可以實現了。

完成之后記得要移除篩選。

在彈窗隱藏時,我們要做一個重置還原的操作,就是把輸入框里的內容清空,不然下一次進來就會有上一次的內容。

這樣我們就完成了增加子級節點的操作了,當然了,我們在這之前還可以增加對文本框是否必填的條件判斷,例如文本為空時,點擊確認按鈕彈出對應的提示彈窗,這些可以根據需要添加。

2.3 添加同級節點

這里和上面的思路基本上是一致的,只是因為增加的是同級,所以不需要考慮父級有沒有箭頭,以及箭頭方向的問題。相當于只需要根據不同樹的層級,獲取到子級最后的no值,然后將大于no值的行的no值都加一,在用添加行的交互,添加對應的值即可。這個比上面還要簡化。

2.4 修改節點內容

修改節點和添加同級節點很相似,但是也有不同。

鼠標點擊修改節點按鈕的時候,我們除了要記錄tree列數的值之外,我們還要將表格的值設置到對應的輸入框里,b2到b6直接設置就可以了。

樹節點的值,我們要根據所在是第幾級為條件,設置對應tree列的值,例如是在第6級,就將tree6的值設置到第一個輸入框;如果是在第5級,就將tree5的值設置到第一個輸入框……

在修改節點彈窗確認按鈕鼠標單擊時,我們根據所在tree的層級進行更新行就可以了,更新對應行的內容為對應輸入框里的內容。這里有一點要注意的,如果更新了第一列樹節點的內容,按我們還要更新他的子節點,例如財務部改名為財會部,這樣如果我們值更新財務部這一行的話,那他原本的子級例如財務會計,還是跟在原來的財務部下面,所以他所有的子級也要一同更新。這里我們根據所在層級,寫不同的更新條件即可。

2.5刪除節點內容

點擊刪除按鈕后,和前面一樣,先用設置文本記錄tree列的值,然后彈出刪除確認的按鈕。

點擊確認按鈕后,根據所在的層級,用刪除行的按鈕,將他以及對應子級刪除即可。例如他是1級,ABC公司,那刪除條件就是tree1==LVAR1,LVAR1就是記錄tree1的值;如果是2級,例如ABC公司-廣東分公司,那刪除條件就是tree1==LVAR1&&tree2==LVAR2……

刪除之后,我們還要做一個判斷,就是刪除的這個是否是父級節點的最后一個,例如說財務部下面有財務會計崗位,那如果是唯一的崗位,刪除之后,財務部級沒有子級了,理論上就不應該有箭頭。

所以我們根據所在層級,對他的父級先進行篩選,例如是刪除的是ABC公司-廣東分公司,我們就對ABC總公司進行篩選,用然后用visiblecount函數可以獲取到篩選后有幾條數據,如果只有1條,就代表只有父級這個節點,沒有其他子級了,我們就用更新行的交互,將他jiantou列的值更新為無箭頭,完成之后移除篩選即可。

這樣我們制作完成了,下次使用時,我們只需要修改中繼器表格里數據,就可以生成含交互效果的多層級的動態增刪改的樹形表格了。

那以上就是本期教程的全部內容,感興趣的同學們可以動手試試哦,感謝您的閱讀,我們下期見。

本文由 @AI產品人 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!