"樹狀"的結構，可用於兩個Table組合運用，分別為左邊(或上方)為"樹狀"資料和右邊(或下方)為DataGrid的方式呈現。
Step1>
這邊先簡單介紹一下 "樹狀" 的表結構，最好要有四個欄位，用途分別作為 "上層目錄編號"、"上層目錄名稱"、"目錄編號"、"目錄名稱"。
P.S作為最上層的目錄節點，該筆資料的 "上層資源(目錄)" 就不需要填值，空值即可。
我們這裡先匯入"檔案目錄設定.xlsx”作為樹狀資料來源，並且可以打開資料表匯入data資料夾下的"檔案目錄設定DATA”
注意:上層目錄需關聯"檔案目錄設定"，首次匯入時請先將類型改為"Text"，編成匯出後再改回"RefName"
Step2>
我們再將"檔案共享.docx"，編程匯出後打開RWD頁面，從工具箱裡拖拉一個【Layout】 和 【Tree】元件到設計畫面上，並將Tree和DataGrid拖拉進Layout裡，如下:
可以在進一步將Layout的Columns做調整，讓Tree只占畫面(左邊)的1/4，DataGrid占剩下(右邊)的3/4，設定如下:
第一個column設定如上
第二個column設定如上
Step3>
Tree主要需要設定的屬性如下，
|
RemoteName |
設定Tree的資料來源，我們這裡選擇檔案目錄設定.檔案目錄設定 |
|
IdField |
設定作為 "目錄編號" 的欄位 |
|
ParentField |
設定作為 "上層目錄編號" 的欄位(如果Tree無需兩階架構，則無需設定此屬性) |
|
TextField |
設定作為 "目錄名稱" 的欄位 |
|
TargetObject |
此屬性用來點選Tree節點時，過濾目標DataGrid的資料，因此設定目標DataGrid |
|
WhereItems |
此屬性用來作為Tree跟DataGrid之間的關聯欄位設定 |
舉例如下:
Step4>
以下為設定存檔後的預覽圖:
