Axure高保真教程:樹篩選中繼器表格

0 評論 5525 瀏覽 10 收藏 9 分鐘

下面是筆者整理分享的關于Axure高保真教程中樹篩選中繼器表格的相關內容,想要了解更多的同學可以進來看看,了解更多哦!

樹和表格是信息系統中兩個重要的元件,樹結構是一種層次化的數據結構,它以樹的形式展示數據的層次關系;表格是一種二維結構,由行和列組成。每一行表示一個記錄,每一列表示一個屬性。在實際應用中,這兩種結構常常會結合使用,以滿足不同的需求。

所以今天作者就教大家怎么在Axure里制作樹結構篩選中繼器表格的原型模板,制作完成后我們只需要填寫好中繼器表格的數據,就可以自動生成交互效果,具體效果如下所示:

一、效果展示

  • 點擊樹節點的箭頭可以展開或者收起子節點。
  • 點擊節點內容可以對右側表格進行篩選,例如點擊廣東分公司,就篩選出所有廣東分公司的數據,點擊廣州營業廳,就篩選出廣州營業廳的數據。

二、制作教程

這里我們主要分為兩個部分,一個是右邊的中繼器表格,一個是左側的樹結構。

1. 中繼器表格的制作

這里我們用中繼器來制作表格,主要是因為,如果要實現增刪改查這種動態效果的表格,只能用中繼器實現,如果用普通的表格原件,就只能做出靜態的表格。

主要材料:中繼器和矩形,在中繼器里放置多個矩形,有幾列就放置多少個,如下圖所示。

如果需要交互樣式效果,如移入行變色,我們可以根據需要在底部添加背景矩形,設置移入時的交互樣式,組合后勾選允許觸發內部交互樣式即可。

中繼器表格的設置:我們需要增加一下幾列內容。

t1-t6對應樹的1-6級的節點,因為我們的樹寫的時候最高是支持到6級,一般6級已經滿足日常需要,我也很難找到案例有到6級的(所以這個案例是5級的案例),當然后續有需要,也可以用同樣的方法增加層級。

其他列,其他列的話是對應你需要顯示的內容,案例中no和name列代表員工編號和姓名,根據需要增加和填寫即可。

填寫完成我,我們要將表格里的內容設置到中繼器里對應的元件,Axure10的話我們點擊中繼器表格表頭的連接元件的按鈕,就可以實現了,如果是Axure8或9,就要寫一個設置文本的交互了,在中繼器每項加載時,我們用設置文本的交互,選擇元件后,里面插入對應列名的item函數即可。

這樣我們就完成了最簡單的中繼器的制作,當然我們可以根據自身需要增加一些樣式的效果,例如增加交替的背景顏色實現斑馬線效果,或者是移入高亮變色的效果,這些都可以根據你們需要增加。

如果表格函數比較多,也可以轉為動態面板,調整動態面板尺寸和顯示滾動條來處理。

表頭部分我們同樣用矩形制作就可以了,這個很簡單,和里面每列對應的矩形的寬度一致,然后擺放好位置即可。

2. 樹元件的選擇

樹元件的話,我們沒有用Axure自身提供的樹元件,我們用中繼器制作的樹元件。Axure提供的樹元件比較局限,樹節點多的時候,要每個節點都要寫一次篩選的交互,這樣會很頭痛,效率極低;而且后續拓展也不足,例如想在節點里增加圖標,或者添加對樹節點的增刪改查等效果,Axure自帶的樹元件都是不能滿足的。

我們用中繼器制作的樹元件就不一樣了,因為是中繼器做的,所以交互只需要寫一遍,所有節點都使用,而且后續可以根據自身需要,添加增刪改查等聯動效果,交互樣式等都可以隨心所欲的修改。所以我們會用中繼器制作的樹元件,這個在我前面的文章里也有詳細的教程,這里就不重復說明了,你們可以參考用中繼器制作樹元件那篇教程制作。

3. 樹元件篩選表格的交互

我們用樹元件也很簡單,在鼠標單擊里面的文本標簽時,我們用添加篩選的交互,對應右側中繼器表格進行篩選,里面樹里的tree1-6和表格里的t1-6是一一對應的。

但是這里會存在一個問題,就是例如我們點擊廣東分公司下的廣州營業廳,如果我們用等于號就是tree1=t1&&tree2==t2&&tree3==t3……這種形式,這樣的話我們就只能找到廣州營業廳一條數據一條數據,因為廣州營業廳下一邊是空值,一邊是有數據的例如財務部,兩個不等的關系,所以就沒法顯示。

所以這里我們除了第一級可以用等于號之外,其他級我們要用包含的情況,例如財務部三個字里是可以包含空值這種情況,這樣就可以實現篩選了,這種方法我們需要用到indexof函數,他可以判斷一個值里是否包含另一個值。

例如廣州市里是否包含北京,如果不包含就會返回值-1,如果包含就會返回值所在的對應位置,例如在廣州市里查詢是否包含廣州,他就會返回0的位置,查詢州,就會返回1的位置,所以我們的判斷條件就是返回的值大于1即包含。

這樣我們制作完成了,下次使用時,我們只需要修改樹和表格里中繼器表格的數據,就可以自動生成對應的樹和表格內容,而且還是自帶樹篩選表格的交互效果,是不是很方便呢?

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

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

題圖來自 Unsplash,基于 CC0 協議

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

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