1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 | 功能變動 |
|---|---|---|
| 11.0.6 | V1.x | V1.x 版本請參見文檔：FVS下拉複選框元件歷史版本 |
| 11.0.16 | V2.0.0 | 舊版本預覽時，預設有全選選項。新增設定項，可自行設定是否顯示全選按鈕 |
| 11.0.16 | V2.0.1 | 元件新增內容樣式設定，詳情請參見 2.1.2 節 |
| 11.0.22 | V2.2.1 | 行動端支援選擇下拉樣式，詳情參見 2.1.2 節 |
| 11.0.22 | V2.8.0 | 元件名稱與參數分離，新增綁定參數邏輯，詳情參見 2.1.1 節 |
| 11.0.22 | V2.10.0 | 下拉框元件和下拉複選框元件合併為下拉框元件，移至元件>列表中 |
1.2 功能簡介
下拉複選框元件在範本預覽時，可下拉選擇單個或多個選項，透過參數聯動其他組件。效果如下圖所示：
組件動畫請參見：FVS組件動畫 。
組件樣式請參見：FVS組件樣式屬性 。元件名稱在「內容」中設定。
2. 功能介紹
2.1 元件內容
下拉複選框元件可設定的內容如下圖所示：
各設定項的詳細介紹如下表所示：
| 設定項 | 詳細介紹 |
|---|---|
| 綁定參數 | 值為參數名稱，用於與參數綁定。預設為空，需根據實際參數進行設置 支援已有參數的綁定，也可以直接輸入新值以建立新的參數 |
| 選項值來源 | 綁定元件的待選擇項，必須設定，否則元件不顯示選項，如何設定可參考：資料字典 |
| 去除重複項，勾選後，會將下拉選項中相同的項合併；不勾選，不會合並仍保留重複的選項。預設勾選 | |
| 回傳值 | 陣列：回傳值類型是陣列型，例如：勾選三個值，回傳值為：["值1","值2","值3"] |
字串：回傳值類型為字串，需要定義分隔符、開始符和結束符，即將勾選的多個值根據分隔符連接成一個字串 符號支援手動輸入，或直接選擇 例如：分隔符定義為逗號，起始符和結束符均定義為單引號，回傳值為 '值1,值2,值3' | |
| 預設值 | 可設定下拉複選框元件顯示的預設值，有如下 3 種 1）自訂字串：可直接輸入正文，輸入多個值時，可實現多選。但輸入多個值時，格式需與元件「回傳值」類型一致，回傳值不做修改時預設用英文逗號隔開，如：華東,華北
2）欄位：可選擇資料集中的欄位。若欄位有多個值，開啟多選後，會顯示該欄位所有值
3）公式：點選右側 fx 輸入公式，若公式對應的值為多個值，則會多選
|
| 全選 | 可選擇是否「支援全選」，預設勾選，勾選後可透過選項中的「全選」按鈕實現一鍵全選 |
| 水印 | 預覽時元件內顯示的淺灰色水印文字，以提示使用者需要輸入資訊，選擇選項或輸入正文後消失，預設為空 |
| 權限 | 設定頁面初始預覽時該元件是否可編輯，預設勾選可編輯 |
| 校驗 | 空值校驗：是否允許元件為空值，勾選後，允許元件為空值；不勾選，可設定校驗提示文字，範本預覽時若元件為空，則顯示提示文字。預設勾選 |
自訂值校驗：是否允許使用者輸入不包含在下拉選單選項中的值
|
2.1.2 內容樣式
字元樣式：支援對元件中顯示的文字進行樣式設定，例如字體、字號、顏色等
元件圖示的大小同樣受到影響，如下圖所示：
注1：對下拉選項中的字體無效，下拉選項字元樣式僅受 FVS範本樣式 影響。
注2：修改字元顏色後，再設定 FVS範本樣式 ，字元顏色會跟隨主題變化，需重新設定。
注3：元件圖示的顏色可以在範本主題樣式中設定。
V2.2.1 及之後版本，行動端 可選擇下拉樣式範本：
效果如下圖所示：
2.2 元件交互事件
點選「交互>新增事件」，可新增 JavaScript 事件實現更多效果。下拉複選框元件支援「初始化後事件」和「編輯結束事件」。如下圖所示：
點選具體的某一個事件，會彈出 JavaScript 事件設定框。如下圖所示：
注：關於 FVS 支援的 JavaScript 可參考文檔FVS支援的JSAPI場景。
3. 範例
3.1 準備範本
1）點選設計器左上角「檔案>建立企業戰情室報表」，可自訂範本名稱和尺寸。
2）建立資料庫查詢 ds1 ，輸入 SQL 查詢語句 SELECT * FROM 銷量 where 銷售員 in ('${spe}') ，並給參數 spe 設定預設值為「孫林」，即預設取出孫林的銷量資料。
如下圖所示：
3.2 新增下拉複選框元件
1）點選組件區「元件>下拉複選框」，新增到頁面中。
在右側配置面板「內容」中將名稱修改為「spe」，即可與資料集中定義的 spe 參數匹配。並設定預設值為「孫林」。
如下圖所示：
2）綁定下拉框元件資料字典，選擇類型為「資料庫表」，選擇 FRDemoTW 中銷量表的「銷售員」欄位。
為了匹配 SQL 中的 in 語句，這裏設定元件回傳值為「字串」，手動輸入分隔符為 ',' 。如下圖所示：
3）若想在下拉框中實現多選，需勾選「開啟多選」、設定「回傳值」。
為了匹配 SQL 中的 in 語句，這裏設定元件回傳值為「字串」，手動輸入分隔符為 ',' 。設定預設值為「孫林」。
注：若預設值要設定多個選項，需與回傳值類型格式保持一致，例如本例預設值可設定為「孫林','金士鵬」。
如下圖所示：
3.3 新增折線圖
點選組件區「圖表>折線圖」，將組件新增到頁面中，給折線圖綁定含有 spe 參數的資料集中資料。如下圖所示：
3.4 效果預覽
點選右上角「儲存」，點選「預覽」，下拉選擇不同選項，折線圖顯示對應銷售員的產品銷量。
若不勾選「開啟多選」，效果如下圖所示：
若勾選「開啟多選」，效果如下圖所示：
3.4.2 行動端
不勾選「開啟多選」的效果如下圖所示：
勾選「開啟多選」的效果如下圖所示：
4. 範本下載
點選下載範本：FVS下拉框元件範例.fvs
