JS根據條件顯示參數元件

1.1 版本

1.2 問題描述

在使用參數元件時，有時我們希望部分參數元件在沒滿足條件時不顯示，滿足條件後再顯示，如下圖效果，只有前面的下拉框選擇了內容之後，後一層下拉框元件才顯示出來。

1.3 實現思路

首先將被控制的元件初始化為不可見或者不可用，然後在條件元件上增加編輯結束事件，透過 JavaScript 腳本設定被控制元件可見或可用。

1.3 API介紹

setEnable(boolean)：設定是否可用，true 為可用，false 為不可用

setVisible(boolean)：設定是否可見，true 為可見，false 為不可見

詳細API請參見：元件通用

2.1 準備範本

點選可下載範本：MultiValue.cpt

範本參數面板樣式如下圖所示：

我們用這個範本中的 area 作為條件元件，province 作為被控元件來說明設定程式。

資料集多值查詢可參考：資料集參數的多值查詢

2.2 設定元件不可見

先設定省份和城市相關的元件為不可見，這樣，在報表初始化時，參數面板就置灰顯示地區元件。

1）點選 province 「下拉框元件」，選擇「元件設定>屬性」，取消勾選「可見」，如下圖所示：

2）同樣的方法將 city 「下拉框元件」也設定為不可見，如下圖所示：

3）同樣的方法，將省份和城市兩個「標籤元件」也設定為不可見，如下圖所示：

2.3 新增事件

1）選擇 area 「下拉框元件」，為其新增一個「編輯後」事件，即使用 JS 方法在 area 元件選完值後將 province 元件和省份標籤設定為可見，如下圖所示：

JavaScript 程式碼如下：

var province = this.options.form.getWidgetByName("province");//獲取下拉框元件province
var area = this.options.form.getWidgetByName("area");//獲取下拉框元件area
var thislen = this.getValue().length;//取area元件中值的長度
//如果area元件值有長度，設定province元件和省份標籤可見，如果無長度設定為不可見且列印“請選擇地區”
if(thislen) {
    province.setVisible(true);
    this.options.form.getWidgetByName("label3").setVisible(true);
} else {    
    province.setVisible(false);
    this.options.form.getWidgetByName("label3").setVisible(false);
    alert("請選擇地區");
}

2）同樣的方法，為 province 元件也新增「編輯後」事件，如下所示：

JavaScript 程式碼如下：

var city = this.options.form.getWidgetByName("city");//獲取下拉框元件city
var province = this.options.form.getWidgetByName("province");//獲取下拉框元件province
var thislen = this.getValue().length;
//如果province元件值有長度，設定city元件和城市標籤可見，如果無長度設定為不可見且列印“請選擇省份”
if(thislen) 
{
city.setVisible(true);
this.options.form.getWidgetByName("label5").setVisible(true);
}
else {
    city.setVisible(false);
    this.options.form.getWidgetByName("label5").setVisible(false);
    alert("請選擇省份");
}

2.4 預覽效果

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

注：不支援行動端。

點選下載範本：JS根據條件控制參數元件是否顯示.cpt