JS實現下拉框選擇後複選框預設全選

1.1 預期效果

參數聯動查詢時，希望下拉框選擇後，複選框可以跟着選中全部所有參數值，效果如下圖所示：

1.2 實現思路

給下拉框新增編輯後事件，使用 JS 呼叫 SQL 內建公式，然後將值轉義成複選框所需格式。

注：填報儲存格中元件的聯動可以查看填報聯動的範例，如：JS實現根據元件值自動匹配資料

2.1 準備資料

1）建立資料查詢資料集 ds1，SQL 語句為：SELECT * FROM 地圖 where pid='${A}' and 省份 in ('${B}')

注：該資料集用於綁定儲存格資料，其中 pid 欄位是省份名稱，省份欄位是城市名稱。

2）建立資料查詢資料集 ds2，SQL 語句為：SELECT 省份 FROM 地圖 where pid='${A}'

注：該資料集用於綁定下拉複選框元件資料字典。

2.2 設計表格

將資料集 ds1 中的對應欄位拖入到儲存格中，表格樣式如下圖所示：

2.3 設定元件

1）進入參數面板編輯介面，將 2 個資料集參數 A 和 B 新增到參數面板，A 參數元件選擇下拉框元件，B 參數選擇下拉複選框元件，如下圖所示：

2）選中下拉框元件，綁定元件資料字典，如下圖所示：

3）選中下拉複選框元件，綁定元件資料字典，將元件回傳值類型設定為字串，分隔符為','，如下圖所示：

2.4 新增事件

選中下拉框元件，給元件新增一個編輯後事件，如下圖所示：

JavaScript 程式碼如下：

var a=this.getValue();//獲取當前下拉框選中值
var b=_g().getParameterContainer().getWidgetByName("B");//獲取複選框元件
var c=FR.remoteEvaluate('=sql("FRDemo","SELECT distinct 省份 from 地圖 where pid=\''+a+'\'",1)');
//JS呼叫SQL函式,查詢獲取過濾後的省份資訊 
var e=c.toString().replace(/,/g,'\',\'')//將值轉為字串,同時轉換成複選框所用格式
setTimeout( function(){
	b.setValue(e);
}, 300 ); //延時300毫秒將值賦給複選框

2.5 效果預覽

1） PC 端

儲存報表，點選分頁預覽，效果如下圖所示：

2）行動端

同時支援 App 端和 H5 端預覽，效果如下圖所示：

已完成範本可參見：%FR_HOME%\webroot\WEB-INF\reportlets\doctw\Parameter\MultiValue\下拉框選擇後複選框預設全選.cpt

點選下載範本：下拉框選擇後複選框預設全選.cpt

下拉框選擇參數值後，可能會報錯：此呼叫存在安全風險，如需使用請在安全管理中修改腳本呼叫公式限制，如下圖所示：

此時只需要登入決策系統，關閉管理系統>安全管理>安全防護下的腳本呼叫公式限制即可。