1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 | 功能變動 |
|---|---|---|
| 11.0.16 | V1.x | V1.x 版本文檔請參考：FVS檢視表樹元件歷史版本 |
| 11.0.16 | V2.0.0 | 元件內容面板交互優化 |
| 11.0.16 | V2.0.1 |
|
| 11.0.22 | V2.8.0 | 元件名稱與參數分離，新增綁定參數邏輯，詳情參見 2.1 節 |
1.2 功能簡介
在範本預覽時，可透過檢視表樹元件展現具有多層樹狀結構的資料，並透過參數聯動其他組件。效果如下圖所示：
組件動畫請參見：FVS組件動畫 。
組件樣式請參見：FVS組件樣式屬性 。元件名稱在「內容」中設定。
2. 功能介紹
2.1 元件內容
檢視表樹元件可設定的內容如下圖所示：
各設定項的詳細介紹如下表所示：
| 設定項 | 詳細介紹 |
|---|---|
| 綁定參數 | 值為參數名稱，用於與參數綁定。預設為空，需根據實際參數進行設定 支援已有參數的綁定，也可以直接輸入新值以建立新的參數 |
| 選項值來源 | 定義檢視表樹實際值與顯示值，有 3 種構建方式：自動構建、普通分層構建、極速分層構建 詳情請參見：樹元件構建方式 |
| 選項 | 開啟多選：勾選後，可選擇下拉樹的多個選項；不勾選，只可選擇下拉樹的一個選項。預設不勾選 勾選後，是否勾選「結果只傳回葉子節點」，會影響勾選上代節點時是否自動選擇子節點
|
非同步展開樹節點：節點載入邏輯，會影響效能，預設勾選
| |
結果只傳回葉子節點：下拉樹是一種有層次結構的元件，每個最末端的葉子節點都有其完整的層次路徑。預設只傳回下拉樹的葉子節點 如選擇北京，回傳值為：北京
| |
| 結果傳回完整路徑：下拉樹是一種有層次結構的元件，每個最末端的葉子節點都有其完整的層次路徑。勾選後即傳回其完整的層次路徑，回傳值為陣列類型。預設不勾選 勾選後，傳回完整路徑，如選擇北京，回傳值為：華北,北京,北京
| |
| 回傳值 | 勾選「開啟多選」且不勾選「結果傳回完整路徑」才有此設定項。用於設定多選下拉樹回傳值的格式，分為陣列和字串兩種
例如：分隔符定義為逗號，起始符和結束符均定義為單引號，回傳值為 '值1,值2,值3'
|
| 預設值 | 可設定檢視表樹元件顯示的預設值，有如下 3 種類型： 1）自訂字串：可直接輸入正文
2）欄位：可選擇資料集中欄位，若欄位值符合多個值寫法，且開啟了多選，則預設值會多選
3）公式：點選右側 fx 輸入公式，例如獲取「表格1」組件 A1 儲存格的值 =表格1~A1，或者 =[[1,11,111],[1,11,112]]
|
| 校驗 | 空值校驗：是否允許元件為空值。預設勾選
|
| 內容樣式 | 字元樣式：支援對元件中顯示的文字進行樣式設定，例如字體、字號、選中或未選中的顏色等 元件圖示的大小不受影響，如下圖所示： 注：修改字元顏色後，再設置 FVS範本樣式 ，字元顏色會跟隨主題變化，需重新設定
|
2.2 元件交互事件
點選「交互>新增事件」，可新增 JavaScript 事件實現更多效果。檢視表樹元件支援「初始化後事件」和「編輯結束事件」。如下圖所示：
點選具體的某一個事件，會彈出 JavaScript 事件設定框。如下圖所示：
注：關於 FVS 支援的 JavaScript 可參考文檔 FVS支援的JSAPI場景 。
3. 範例
3.1 建立範本
點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂名稱和尺寸。如下圖所示：
3.2 準備資料
本例使用 極速分層構建 方式。
建立資料集 ds1，SQL 語句為：SELECT 貨主地區,貨主省份,貨主城市 FROM S訂單 where 貨主城市!='' ，作為下拉樹元件的資料字典使用。
建立資料集 ds2：SELECT * FROM S訂單 ${if(len(area)=0,"","where 貨主城市 = '" + area + "'")} 。
步驟如下圖所示：
3.3 設計下拉樹元件
3.3.1 新增組件
點選組件區「元件>下拉樹」，將其新增到畫布中，將綁定參數設定為「area」，即 ds2 中設定的資料集參數。如下圖所示：
3.3.2 設定選項值來源
1）開啟「選項值來源」設定框，構建方式預設為「極速分層構建」，點選加號新增層次。如下圖所示：
2）選擇每層對應的值，並且設定相應的依賴層次和依賴欄位，分別如下圖所示：
3.4 設計表格組件
3.4.1 新增組件
點選組件區「文字>表格」，將其新增到畫布，點選「編輯組件」進入表格編輯介面。如下圖所示：
3.4.2 設計表格內容
將對應欄位拖入儲存格即可，可自行調整儲存格式。如下圖所示：
點選「傳回視覺化看板」傳回畫布。
3.5 效果預覽
3.5.1 PC 端
點選右上角「儲存」，點選「預覽」，效果如下圖所示：
3.5.2 行動端
預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：
4. 範本下載
點選下載範本：FVS檢視表樹元件範例.fvs
