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

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

目录:

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控件,选择属性表>基本属性可见勾选掉,如下图:
222
同样city控件也设置为不可见:
222
同样省份和城市两个标签控件也设置为不可见。
222
3.2 条件控件的事件设置
选择area控件,添加编辑后事件,调用JS方法将province控件设定为可见,具体的代码如下:
222
js代码如下:
var province = this.options.form.getWidgetByName("province"); var area = this.options.form.getWidgetByName("area"); var thislen = this.getValue(area).length; if(thislen) { province.setVisible(true); this.options.form.getWidgetByName("label3").setVisible(true); } else { province.setVisible(false); this.options.form.getWidgetByName("label3").setVisible(false); alert("请选择地区"); }
同样province控件也添加编辑后事件,如下所示:
222
js代码如下:
var city = this.options.form.getWidgetByName("city"); var province = this.options.form.getWidgetByName("province"); var thislen = this.getValue(province).length; if(thislen) { city.setVisible(true); this.options.form.getWidgetByName("label5").setVisible(true); } else { city.setVisible(false); this.options.form.getWidgetByName("label5").setVisible(false); alert("请选择省份"); }

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

4. 预览效果编辑

4.1 PC端预览效果

222

4.2 移动端预览效果

注:不支持移动端。

5. 已完成模板编辑

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

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]