"樹狀"的結構，可用於兩個Table組合運用，分別為左邊(或上方)為"樹狀"資料 和 右邊(或下方)為DataGrid的方式呈現。

 

Step1>    這邊先簡單介紹一下 "樹狀" 的表結構，最好要有四個欄位，用途分別作為 "上層目錄編號"、"上層目錄名稱"、"目錄編號"、"目錄名稱"，舉例如下。

P.S作為最上層的目錄節點，該筆資料的 "上層資源(目錄)" 就不需要填值，空值即可。

 

Step2>   從工具箱裡拖拉一個Layout和Tree元件到設計畫面上，並將Tree和DataGrid拖拉進Layout裡，如下:

可以在進一步將Layout的Columns做調整，讓Tree只占畫面(左邊)的1/3，DataGrid占剩下(右邊)的2/3，設定如下:

第一個column設定如上

第二個column設定如上

 

Step3>   Tree主要需要設定的屬性如下，

RemoteName	設定Tree的資料來源
IdField	設定作為 "目錄編號" 的欄位
ParentField	設定作為 "上層目錄編號" 的欄位(如果Tree無需兩階架構，則無需設定此屬性)
TextField	設定作為 "目錄名稱" 的欄位
TargetObject	此屬性用來點選Tree節點時，過濾目標DataGrid的資料，因此設定目標DataGrid
WhereItems	此屬性用來作為Tree跟DataGrid之間的關聯欄位設定

舉例如下:

 

Step4>   以下為設定存檔後的預覽圖: