JS根据条件显示参数控件

1.1 版本

1.2 应用场景

在使用参数控件时，有时我们希望部分参数控件在没满足条件时不显示，满足条件后再显示。

例如，只有前面的下拉框选择了内容之后，后一层下拉框控件才显示出来。如下图所示：

1.3 实现思路

首先将被控制的控件初始化为不可见或者不可用，然后在条件控件上增加编辑结束事件，通过 JavaScript 脚本设置被控制控件可见或可用。

1.4 接口介绍

setEnable(boolean)：设置是否可用，true 为可用，false 为不可用

setVisible(boolean)：设置是否可见，true 为可见，false 为不可见

详细接口请参见：控件通用

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）同样的方法，将省份和城市两个「标签控件」也设置为不可见。如下图所示：

2.3 添加事件

1）选择控件 area ，为其添加一个编辑后事件，即使用 JS 方法在 area 控件选完值后将 province 控件和省份标签设置为可见。如下图所示：

JavaScript 代码如下：

var province = _g().getParameterContainer().getWidgetByName("province");//获取下拉框控件province
var area = _g().getParameterContainer().getWidgetByName("area");//获取下拉框控件area
var thislen = this.getValue().length;//取area控件中值的长度
//如果area控件值有长度，设置province控件和省份标签可见，如果无长度设置为不可见且打印“请选择地区”
if(thislen) {
    province.setVisible(true);
    _g().getParameterContainer().getWidgetByName("label3").setVisible(true);
} else {    
    province.setVisible(false);
    _g().getParameterContainer().getWidgetByName("label3").setVisible(false);
    alert("请选择地区");
}

2）同样的方法，为 province 控件也添加编辑后事件。如下所示：

JavaScript 代码如下：

var city = _g().getParameterContainer().getWidgetByName("city");//获取下拉框控件city
var province = _g().getParameterContainer().getWidgetByName("province");//获取下拉框控件province
var thislen = this.getValue().length;
//如果province控件值有长度，设置city控件和城市标签可见，如果无长度设置为不可见且打印“请选择省份”
if(thislen) 
{
city.setVisible(true);
_g().getParameterContainer().getWidgetByName("label5").setVisible(true);
}
else {
    city.setVisible(false);
    _g().getParameterContainer().getWidgetByName("label5").setVisible(false);
    alert("请选择省份");
}

2.4 效果预览

保存模板，点击「分页预览」，PC 端效果如下图所示：

注：不支持移动端。

点击下载已完成模板：16-JS根据条件控制参数控件是否显示(可用).cpt