JS實現參數元件指派

1.1 版本

1.2 問題描述

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

1.3 實現思路

可以透過 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。注1：該段代碼是用來對 state 參數置數，當 username 為空時，!username 為真，此時將 state 置數為 2；否則當 username 有值時，將 state 置數為 1。

注2：行動端需要 將 3.2 中的 JavaScript 代碼新增到編輯結束事件中。為了 PC 端和行動端可以在一個範本中實現一樣的效果，可以同時新增編輯後和編輯結束事件，JS 代碼一樣。

注3：若下拉框需要多選，需要將username指派語句調整為陣列形式，例如this.options.form.getWidgetByName('treeComboBox2').setValue([['02'],['05']]);

2.3 預覽效果

2.3.1 PC 端

儲存範本，點選「分頁預覽」，PC 端效果如下所示：

2.3.2 行動端

App 及 HTML5 效果如下圖所示：

點選下載範本：JS實現參數元件指派.cpt