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