JS根据条件控制参数控件是否显示(可用)
文档创建者:印然 (67260 ) 浏览次数:9258次 编辑次数: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控件,选择属性表>基本属性将可见勾选掉,如下图:
同样city控件也设置为不可见:
同样省份和城市两个标签控件也设置为不可见。
3.2 条件控件的事件设置
选择area控件,添加编辑后事件,调用JS方法将province控件设定为可见,具体的代码如下:
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控件也添加编辑后事件,如下所示:
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端预览效果
4.2 移动端预览效果
注:不支持移动端。
5. 已完成模板编辑
模板效果在线查看请点击:JS根据条件控制参数控件是否显示(可用).cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\16-JS根据条件控制参数控件是否显示(可用).cpt
主题: 二次开发