JS實現參數控件賦值

1.1 問題描述

參數界面中，往往需要在一個控件中動态的控制其他控件的值，如下圖，當 username 有值時，state 自動變爲 1，當 username 無值時，state 自動變爲 2。

1.2 實現思路

可以通過 JavaScript 腳本獲取到需要的控件，從而獲得控件的值，及給控件賦值。

我們制作一個簡單的例子實現上圖效果。

2.1 準備模板

1）新建模板，點擊菜單模板-模板參數，添加兩個模板參數：username和state：

2）打開參數面板，在右側的控件設置中，點擊全部添加按鈕：

3）控件會自動添加到參數面板中，如下圖參數面板所示：

4）将兩個未定義的控件分别設置爲下拉框控件和單選按鈕組控件：

5）選擇下拉框控件 username，設置數據字典，類型設置選擇自定義，實際值和顯示值都爲：jerny，anna，merry。

6）選擇單選按鈕組控件 state，設置數據字典，類型設置選擇自定義，實際值和顯示值都爲：1，2。

2.2 添加事件

選擇下拉框控件 username，添加編輯後事件，如下圖所示：

JavaScript 代碼如下：

var state = this.options.form.getWidgetByName("state");
var username = this.options.form.getWidgetByName("username").getValue();
if(!username) {
    state.setValue(2);
} else {
    state.setValue(1);
}

注：該段代碼是用來對 state 參數置數，當 username 爲空時，!username 爲真，此時将 state 置數爲 2；否則當 username 有值時，将 state 置數爲 1。

注：移動端需要 将3.2 中的 JavaScript 代碼添加到編輯結束事件中。爲了 PC 端和移動端可以在一個模板中實現一樣的效果，可以 同時添加編輯後和編輯結束事件，JS 代碼一樣。

2.3 預覽效果

保存模板，點擊分頁預覽，PC 端效果如下所示：

App 及 HTML5 效果如下圖所示：

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\參數界面JS實例\15-JS實現參數控件賦值.cpt

點擊下載模板：15-JS實現參數控件賦值.cpt