JS根据条件控制参数控件是否显示(可用)

JS根据条件控制参数控件是否显示(可用)

 

文档创建者：印然 (67260 )     浏览次数：9258次     编辑次数：12次     最近更新：ukae 于 2018-08-08     

目录:

• 1. 描述
• 2. 思路
• 3. 操作步骤
• 4. 预览效果
• 5. 已完成模板

1. 描述编辑

 

在使用参数控件时，有时我们希望部分参数控件在没满足条件时不显示，满足条件后再显示，如下图效果：只有前面的下拉框选择了内容之后，后一层下拉框控件才显示出来：

2. 思路编辑

首先将被控制的控件初始化为不可见或者不可用，然后在条件控件上增加编辑结束事件，通过js脚本设置被控制控件可见或可用，对应的js方法如下：

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

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

3. 操作步骤编辑

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

我们用这个模板中的area作为条件控件，province作为被控控件来说明设置过程。

3.1 初始化被控控件为不可见

点击province控件，选择属性表>基本属性将可见勾选掉，如下图：

同样city控件也设置为不可见：

同样省份和城市两个标签控件也设置为不可见。

3.2 条件控件的事件设置

选择area控件，添加编辑后事件，调用JS方法将province控件设定为可见，具体的代码如下：

js代码如下：

 

 

1. var province = this.options.form.getWidgetByName("province");  
2. var area = this.options.form.getWidgetByName("area");  
3. var thislen = this.getValue(area).length;  
4. if(thislen) {  
5.     province.setVisible(true);  
6.     this.options.form.getWidgetByName("label3").setVisible(true);  
7. } else {      
8.     province.setVisible(false);  
9.     this.options.form.getWidgetByName("label3").setVisible(false);  
10.     alert("请选择地区");  
11. }  

同样province控件也添加编辑后事件，如下所示：

js代码如下：

 

 

1. var city = this.options.form.getWidgetByName("city");  
2. var province = this.options.form.getWidgetByName("province");  
3. var thislen = this.getValue(province).length;  
4. if(thislen)   
5. {  
6.     city.setVisible(true);  
7.     this.options.form.getWidgetByName("label5").setVisible(true);  
8. }  
9. else {  
10.     city.setVisible(false);  
11.     this.options.form.getWidgetByName("label5").setVisible(false);  
12.     alert("请选择省份");  
13. }  

保存模板预览，效果如上图。

 

4. 预览效果编辑

 

 

4.1 PC端预览效果

 

 

4.2 移动端预览效果

 

注：不支持移动端。

 

5. 已完成模板编辑

 

模板效果在线查看请点击：JS根据条件控制参数控件是否显示(可用).cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\16-JS根据条件控制参数控件是否显示(可用).cpt

点击下载模板

 

主题： 二次开发