樹形篩選與層級顯示
路徑：【後台管理】⇒【應用管理】⇒【應用】⇒【業務模型】⇒【列表設計】
當數據本身帶有上下層關係時，例如產品分類、BOM 的母件與子件、公司與上級公司，用一般的下拉篩選不容易看出彼此的隸屬關係。列表設計提供兩個功能來處理這種情境：
- 樹形篩選：把篩選欄位改成樹狀結構顯示在前台列表左側，點選節點即可篩選出該節點底下的數據。
- 層級顯示：讓前台可以直接檢視一筆數據的上下層關係，或展開它在其他模型中的關聯數據。
本章節以「產品分類與 BOM 管理」應用的 【產品主檔】 為例，說明這兩項設定的方式與前台的操作方式。
1. 畫面介紹
前台列表的左側是 【樹形篩選】 區，最上方為篩選欄位的頁籤，下方依序是搜尋框與樹狀結構；數據列最前方則是 【層級顯示】 的兩個操作圖示，分別用來檢視該筆數據的層級關係與展開它的關聯數據。
前台的樹形篩選與層級顯示
2. 事前準備：自關聯欄位
樹形篩選與層級顯示都是依照 自關聯欄位 來組成層級，因此在設定之前，請先在 【表單設計】 中準備好需要的欄位。
自關聯是指 關聯單選 控制項的 【選擇業務模型】 指向表單自己，讓同一張表單的某一筆數據可以關聯到另一筆數據，被關聯的那筆就是它的上層數據。
本範例在 【產品主檔】 中準備了兩個自關聯欄位：
| 欄位 | 用途 |
|---|---|
| 上層分類 | 記錄產品所屬的分類，用來組成產品分類的層級 |
| 母件 | 記錄產品的上層組件，用來組成 BOM 的母件與子件關係 |
表單設計中的自關聯欄位
3. 樹形篩選
📌 設為樹形篩選
樹形篩選是篩選欄位的一種呈現方式，所以要先把欄位加入 【篩選欄位】。
在 【網頁版】 的 【篩選欄位】 中點選 『新增圖示』 或 『+ 篩選欄位』，選擇要作為樹形篩選的自關聯欄位；篩選欄位的新增與排序方式請詳見 篩選欄位 章節。
本範例加入了 上層分類 與 母件 兩個欄位。
將自關聯欄位加入篩選欄位
點選 『篩選欄位名稱』，即可在設定視窗中把 【選擇方式】 改為 『樹形篩選』。
【選擇方式】 只有關聯類的控制項才會出現，共有三個選項：
- 下拉框：以下拉選單選擇數據。
- 彈出框：開啟選擇視窗選擇數據。
- 樹形篩選：改以樹狀結構固定顯示在前台列表左側。
選擇方式改為樹形篩選
設為樹形篩選的欄位會固定顯示在前台列表左側，因此不能再設為 快捷篩選，該欄位右側的 『釘選符號』 也不會出現。
📌 查詢欄位
【查詢欄位】 用來決定樹狀結構要依照哪一個自關聯欄位展開，下拉選單中只會列出模型裡的自關聯欄位。
一般情況下請選擇與 【數據項】 相同的欄位，也就是它自己；本範例的 上層分類 篩選欄位就選擇 上層分類，母件 篩選欄位則選擇 母件。
查詢欄位
【查詢方式】 則是篩選的判斷邏輯，關聯單選可選擇 等於、不等於、等於任意一個 與 不等於任意一個。
📌 樹狀顯示方式
【樹形顯示方式】 決定樹狀結構要怎麼依照使用者的數據權限產生節點，兩者互斥，只能選擇其中一項。
- 動態計算顯示：基於使用者權限內的數據，動態計算根節點和每一層級節點。
- 依固定層級顯示：從有數據權限的根節點開始，逐級向下展開，對於無數據權限的下級節點，則不顯示。
樹狀顯示方式
📌 含子數據與顯示篩選項
【含子數據】 開啟後，點選樹狀節點時會連同該節點底下所有層級的數據一起查詢；關閉時則只會查詢剛好等於該節點的數據。
【顯示篩選項】 可以在樹狀結構中額外加入 顯示 "為空" 項 與 顯示 "不為空" 項 兩個選項，讓前台使用者篩選出該欄位沒有填寫、或已經填寫的數據。
含子數據與顯示篩選項
📌 多個樹形篩選
同一個列表可以設定多個樹形篩選。設定後，中間的預覽區左側就會出現樹形篩選區，並以頁籤區隔各個欄位。
本範例的 上層分類 與 母件 都設為樹形篩選，前台就能切換頁籤，分別用產品分類或 BOM 的母件關係來篩選數據。
以頁籤區隔多個樹形篩選
4. 層級顯示
【層級顯示】 用來設定前台可以檢視哪些層級關係。點選 『+ 層級顯示』 即可新增一組設定，點選已建立的項目則可以修改，點選右側的 『刪除圖示』 可以將其移除。
一個列表可以建立多組層級顯示設定，本範例建立了三組：產品分類層級、BOM層級（母件-子件） 與 產品關聯資訊（報價、庫存）。
層級顯示
在 【層級顯示設定】 視窗中，【層級顯示名稱】 是前台切換層級時顯示的名稱，【層級關係】 則決定層級要從哪裡取得，兩者都是必填。
📌 本模型自關聯
【本模型自關聯】 是用同一個模型裡的自關聯欄位組成層級，【層級顯示】 的下拉選單中只會列出模型裡的自關聯欄位。
本範例的 產品分類層級 選擇 上層分類，BOM層級（母件-子件） 則選擇 母件，同一份產品數據因此可以用兩種不同的角度檢視層級。
本模型自關聯
📌 顯示欄位設定
【顯示欄位設定】 用來指定層級畫面要顯示哪些欄位，與列表本身的 顯示欄位 各自獨立。
點選後會開啟 【設定顯示欄位】 視窗，左側勾選要顯示的系統欄位與主表欄位，右側的 【已選欄位】 則可以長按拖曳調整順序、點選 『X』 移除單一欄位，或點選 『清空』 全部移除。
設定顯示欄位
📌 跨模型關聯
【跨模型關聯】 是把其他模型的數據當成下層，適合用來一次檢視一筆數據的相關資訊。
【層級顯示】 區塊會以樹狀方式呈現層級結構，最上層固定是標記為 【本模型】 的目前模型。點選右側的 『+』 即可新增下一層，下拉選單會列出應用中有欄位關聯到上層模型的模型，並同時標示用來關聯的 【關聯欄位】。
本範例在 產品主檔 底下加入了 供應商報價 與 庫存異動 兩個模型，前台展開一筆產品時就能直接看到它的報價與庫存異動紀錄。
跨模型關聯
每一層右側的 『欄位』 用來設定該模型要顯示的欄位，『⋯』 則提供 新增下級 與 刪除下級 兩個選項，可以再往下延伸更多層級。
新增下級與刪除下級
每個列表只能新增一組跨模型關聯的層級顯示設定。已經建立過之後，【層級關係】 中的 『跨模型關聯』 就會變成不可選取。
設定完成後，記得依序點選 『儲存』 與 『發布』，更新的內容才會實際顯示在前台。
5. 前台操作
📌 樹形篩選
樹形篩選固定顯示在前台列表左側。點選節點前方的 『展開箭頭』 可以展開或收合下層節點，點選節點名稱則會立刻篩選數據，被套用篩選的欄位表頭也會出現 『篩選圖示』；點選 『全部』 即可取消篩選。
節點較多時，可以用上方的搜尋框直接搜尋節點名稱。
本範例點選 電子產品 後共篩選出 10 筆數據，其中包含 上層分類 為下層節點 筆記型電腦 與 顯示器 的產品，這就是 【含子數據】 開啟後的效果。
點選樹狀節點篩選數據
📌 展開子數據
點選數據列最前方的 『展開箭頭』，即可在該筆數據下方展開跨模型關聯的子數據；有多個下層模型時會以頁籤區隔，點選頁籤即可切換。
展開跨模型關聯的子數據
📌 層級關係畫面
點選數據列前方的 『層級圖示』，即會開啟該筆數據的層級關係畫面，並依照 【顯示欄位設定】 指定的欄位呈現數據。
畫面左上角會顯示目前使用的層級名稱，點選旁邊的 『下拉箭頭』 即可切換到其他本模型自關聯的層級設定；本範例可在 產品分類層級 與 BOM層級（母件-子件） 之間切換。點選右上角的 『X』 則會回到列表。
層級關係畫面