樹元件構建方式

FVS 插件 V1.17.1 版本新增 下拉樹元件 與 檢視表樹元件 ，兩者的定義方法一致，差別主要在於瀏覽器端預覽時顯示的效果不同。如下圖所示：

本文主要講解樹元件構建樹的三種方式的差別及應用，應用範例主要以下拉樹元件為例，檢視表樹同理設定即可。

1）自動構建

根據樹資料集層級關係自動構建出下拉樹，無需一層一層定義資料。

2）普通分層構建

透過 資料字典 一層一層定義下拉樹，需要資料集中定義一些 layer 參數配合完成，將上一層的值作為參數值，過濾下一層的資料。

普通分層構建方式提供有「效能優先」選項，勾選後會提高載入效率，預設不勾選。

勾選後，當有層目錄下沒有子節點，顯示的時候仍會是 ，點開無資料項。如下圖所示：

3）極速分層構建：

透過「資料集 」來定義下拉樹的層級，相比「普通分層構建」，不需要 layer 參數配合，而是將資料按分類排列，每一層綁定資料列並設定依賴關係即可。

4）詳細對比如下表所示：

將普通資料集轉為 樹資料集 後，下拉樹元件可直接選擇樹資料集來自動構建樹層級，樹資料集必須要有明顯的父子關係。如下圖所示：

構建樹時，要注意資料不能存在環，否則構建樹不成功，日誌報錯：樹元件構建失敗，原始標記欄位資料間構成循環。

3.1 準備資料

準備可以構建樹資料集的表，例如本例使用的內建資料庫 FRDemo 中的公司部門表。

注：可以構建樹資料集的表要求請參見 樹資料集的完整性檢查 。

建立 FVS 視覺化看板，增加資料集 ds1，SQL 語句為：SELECT * FROM 公司部門。表結構如下圖所示：

表分析：

• 第一行表示總部的標記是 1，父標記為空，表示它是根部門，沒有父部門，通常如果一個部門沒有父部門，那麼父部門標記為空。

• 第二行的意思是「人力資源部」的原始標記為 11，其父部門是標記為 1 的部門（然後可以根據這個標記來查詢它的父部門是總部）。

遍歷這個資料集後，能得到所有的部門資訊，職位資訊；根據「上級 ID」，到「部門 ID」這一欄去尋找相應的部門名稱，進而可以構建父部門。

需要注意的是：「上級 ID」中出現的標記（除了是空），都必須在「部門ID」中找到對應的標記，可以看到上圖中所有的「上級 ID」都能在「部門 ID」中找到對應的值。

3.2 轉為樹資料集

建立樹資料集 Tree，使用 ds1 來構建樹，如下圖所示：

3.3 設計下拉樹元件

3.4 效果預覽

點選「預覽」，效果如下圖所示：

注：不支援行動端。

普通分層構建需在資料字典定義介面給每一個層級分別綁定不同的資料集。其實就是 FR 中的動態 SQL，需要將每個 SQL 定義為一個報表資料集。

在普通分層構建中層次定義如下：

• 層次 1：透過 資料字典 來定義下拉框的實際值與顯示值。

• 層次 2：根據層次 1 的資料進行過濾，需要定義成資料集，然後透過資料查詢傳回資料集定義的列。資料集定義成：SELECT 欄位 FROM 表名 WHERE 層次 1 的欄位 = '${layer1}'

注1：layer1 表示取層次 1 節點的值，若在層次 3 中呼叫，則是 SELECT 欄位 FROM 表名 WHERE 層次 2 的欄位 = '${layer2}' 依次類推，其中 layer1，layer2 等均是系統參數，均為固定寫法，不可更改。

注2：layer 系列參數只可用於樹構建，不支援用於參數過濾。

4.1 準備資料

建立 FVS 視覺化看板，建立 3 個資料集，SQL 語句分別如下：

ds1：SELECT 貨主地區 FROM 訂單 where 貨主地區!=''，查詢出所有地區。

ds2：SELECT  貨主省份 FROM 訂單 where 貨主省份!='' and 貨主地區='${layer1}'，根據第一層 layer1 的值查詢出貨主省份

ds3：SELECT  貨主城市 FROM 訂單 where 貨主城市!='' and 貨主地區 = '${layer1}'and 貨主省份='${layer2}'，根據前兩層 layer1、layer2 的值查詢出貨主城市。

4.2 設計下拉樹元件

1）向畫布中新增下拉樹元件，開啟「資料字典」設定框，選擇構建方式為「普通分層構建」，點選加號新增層次。如下圖所示：

2）層次1、層次2、層次3 分別對應資料查詢 ds1 、ds2 、ds3 的欄位，需選中層次後分別設定。如下圖所示：

4.3 效果預覽

點選「預覽」，效果如下圖所示：

注：不支援行動端。

5.1 準備資料

建立 FVS 視覺化看板，建立資料集，SQL 語句為：SELECT 貨主地區,貨主省份,貨主城市 FROM S訂單 where 貨主城市!='' 。表結構如下圖所示：

5.2 設計下拉樹元件

1）向畫布中新增下拉樹元件，開啟「資料字典」設定框，構建方式預設為「極速分層構建」，點選加號新增層次。如下圖所示：

2）選擇每層對應的值，並且設定相應的依賴層次和依賴欄位，操作方式如下：

• 層次1：

• 層次2：

• 層次3：

5.3 效果預覽

點選「預覽」，效果如下圖所示：

注：不支援行動端。

點選下載範本：

FVS樹元件自動構建範例.fvs

FVS樹元件極速分層構建範例.fvs

FVS樹元件極速分層構建範例.fvs