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

编辑
  • 文档创建者:印然
  • 浏览次数:15399次
  • 编辑次数:17次
  • 最近更新:Kevin-s 于 2019-11-19
  • 1. 概述

    1.1 问题描述

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

    1.2 实现思路

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

    setEnable(boolean):设置是否可用,true 为可用,false 为不可用;

    setVisible(boolean):设置是否可见,true 为可见,false 为不可见;

    2. 示例

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

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

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

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

    image.png

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

    222

    2.2 条件控件的事件设置

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

    image.pngJavaScript 代码如下:


    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 控件也添加编辑后事件,如下所示:

    image.png

    JavaScript 代码如下:


    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("请选择省份");
    }

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

    2.3 预览效果

    保存模板,点击分页预览,PC 端效果如下所示:

    222

    注:不支持移动端。

    3. 模板下载

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

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

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


    附件列表


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

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

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