JS根据条件控制参数控件是否显示/可用- FineReport帮助文档

1. 概述

1.1 問題描述

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

1.2 實現思路

首先将被控制的控件初始化爲不可見或者不可用，然後在條件控件上增加編輯結束事件，通過 JavaScript 腳本設置被控制控件可見或可用。

1.3 接口介紹

setEnable(boolean)：設置是否可用，true 爲可用，false 爲不可用

setVisible(boolean)：設置是否可見，true 爲可見，false 爲不可見

2. 示例

2.1 準備模板

打開模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\parameter\\MultiValue\MutiValue.cpt

點擊可下載模板：MultiValue.cpt

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

我們用這個模板中的 area 作爲條件控件，province 作爲被控控件來說明設置過程。

2.2 設置控件不可見

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

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

2）同樣的方法将 city 「下拉框控件」也設置爲不可見，如下圖所示：

3）同樣的方法，将省份和城市兩個「标簽控件」也設置爲不可見，如下圖所示：

222

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(area).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(province).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("請選擇省份");
}