FVS下拉複選框元件

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 功能簡介

下拉複選框元件在範本預覽時，可下拉選擇單個或多個選項，透過參數聯動其他組件。效果如下圖所示：

組件動畫請參見：FVS組件動畫 。

組件樣式請參見：FVS組件樣式屬性 。元件名稱在「內容」中設定。

2.1 元件內容

下拉複選框元件可設定的內容如下圖所示：

各設定項的詳細介紹如下表所示：

設定項	詳細介紹
名稱	元件名稱即參數名稱，預設生成中文名稱，需根據實際參數進行修改
字號	下拉複選框中顯示正文的字號，預設為 12 px，對下拉選項中的字體無效
資料字典	綁定元件的待選擇項，必須設定，否則元件不顯示選項，如何設定可參考：資料字典
	去除重複項，勾選後，會將下拉選項中相同的項合併；不勾選，不會合並仍保留重複的選項。預設勾選
預設值	可設定下拉複選框元件顯示的預設值，有如下 3 種 1）自訂字串：可直接輸入正文，輸入多個值時，可實現多選。但輸入多個值時，格式需與元件「傳回值」型別一致，傳回值不做修改時預設用英文逗號隔開，如：華東,華北 2）欄位：可選擇資料集中欄位，若欄位有多個值，則會多選 3）公式：點選右側 fx 輸入公式，若公式對應的值為多個值，則會多選
傳回值	陣列：傳回值型別是陣列型，例如：勾選三個值，傳回值為：["值1","值2","值3"]
	字串：傳回值型別為字串，需要定義分隔符、開始符和結束符，即將勾選的多個值根據分隔符連接成一個字串 符號支援手動輸入，或直接選擇 例如：分隔符定義為逗號，起始符和結束符均定義為單引號，傳回值為 '值1,值2,值3'
全选	可选择是否「支持全选」，默认勾选，勾选后可通过选项中的「全选」按钮实现一键全选
水印	預覽時元件內顯示的淺灰色水印文字，以提示使用者需要輸入資訊，選擇選項或輸入正文後消失，預設為空
權限	設定頁面初始預覽時該元件是否可編輯，預設勾選可編輯
校驗	空值校驗：是否允許元件為空值，勾選後，允許元件為空值；不勾選，可設定校驗提示文字，範本預覽時若元件為空，則顯示提示文字。預設勾選
	自訂值校驗：是否允許使用者輸入不包含在下拉選單選項中的值 勾選後，允許輸入不包含在下拉選項中的值，並將其新增到下拉選項中，但重新整理後不會儲存 不勾選，不允許輸入不包含在下拉選項中的值，當輸入值不包含在下拉選項中時，下拉複選框不會自動清除輸入值，並會彈出提示框：不允許自訂值

2.2 元件交互事件

點選「交互>新增事件」，可新增 JavaScript 事件實現更多效果。下拉複選框元件支援「初始化後事件」和「編輯結束事件」。如下圖所示：

點選具體的某一個事件，會彈出 JavaScript 事件設定框。如下圖所示：

注：關於 FVS 支援的 JavaScript 可參考文檔FVS支援的JS接口場景。

3.1 準備範本

1）點選設計器左上角「檔案>建立大屏報表」，可自訂範本名稱和尺寸。

2）建立資料庫查詢 ds1 ，輸入 SQL 查詢語句 SELECT * FROM 銷量 where 銷售員 in ('${spe}') ，並給參數 spe 設定預設值為「孫林」，即預設取出孫林的銷量資料。

如下圖所示：

3.2 新增下拉複選框元件

1）點選組件區「元件>下拉複選框」，新增到頁面中。

在右側配置面板「內容」中將名稱修改為「spe」，即可與資料集中定義的 spe 參數匹配。並設定預設值為「孫林」。

如下圖所示：

2）綁定下拉框元件資料字典，選擇型別為「資料庫表」，選擇 FRDemo 中銷量表的「銷售員」欄位。

為了匹配 SQL 中的 in 語句，這裏設定元件傳回值為「字串」，手動輸入分隔符為 ',' 。如下圖所示：

注：若預設值要設定多個選項，需與傳回值型別格式保持一，例如本例預設值可設定為「孫林','金士鵬」。

如下圖所示：

3.3 新增折線圖

點選組件區「圖表>折線圖」，將組件新增到頁面中，給折線圖綁定含有 spe 參數的資料集中資料。如下圖所示：

3.4 效果預覽

3.4.1 PC端

點選右上角「儲存」，點選「預覽」，下拉選擇不同選項，折線圖則顯示對應銷售員的產品銷量。如 1.2 節效果所示。

3.4.2 移动端

點選下載範本：FVS下拉復選框示例.fvs