JS 实现动态隐藏参数以及控制参数面板高度

  • 文档创建者:Kevin-s
  • 编辑次数:14次
  • 最近更新:Kevin-s 于 2019-11-19
  • 1. 概述

    1.1 问题描述

    我们在开发报表的时候经常会遇到使用的参数控件较多的情况,而参数面板上的部分参数控件一般为默认选择值,这时候可以通过对这部分参数进行隐藏,并设置控制参数面板的高度,隐藏不需要的控件。

    1.2 实现思路

    通过增加两个参数按钮控件,一个查看所有控件,一个隐藏部分控件,通过点击这两个按钮增减参数面板上的控件,实现上面所述功能。

    2. 示例

    2.1 添加参数

    在 FineReport 设计器中点击 文件>新建普通报表,在新建报表的参数面板上添加多个控件,如下图所示:

    1.png

    2.2 修改控件名称

    1)分别选中参数面板上的 button1 和 button3 按钮控件,在右侧属性面板>控件设置>高级中,找到「按钮名字」在其右侧为这两个按钮控件添加名字,分别为「查看所有参数」和「隐藏所有参数」。下图只展示 button1 添加按钮名称后的情况:

    2.png

    2)分别选中参数面板上最后一行的控件,在右侧属性面板>控件设置>基本中,找到「控件名称」在其右侧分别输入控件名称 abcdef。下图只展示其中一个控件添加控件名称后的情况:

    5.png

    2.3 添加点击事件

    1)为「查看所有参数」按钮添加点击事件。

    选中该按钮,在右侧属性面板>控件设置>事件中,添加点击事件,如下图所示:

    image.png

    JS 代码如下所示:

    var a= this.options.form.getWidgetByName("a");  //获取名为a的控件
    var b= this.options.form.getWidgetByName("b");
    var c= this.options.form.getWidgetByName("c");
    var d= this.options.form.getWidgetByName("d");
    var e= this.options.form.getWidgetByName("e");
    var f= this.options.form.getWidgetByName("f");
    a.setVisible(true);
    b.setVisible(true);
    c.setVisible(true);
    d.setVisible(true);
    e.setVisible(true);
    f.setVisible(true);
    //1秒后查看参数面板上的所有参数
    setTimeout(function() {  
     $('.parameter-container').css('height', '160px');    
     $('#content-container').css('top', '160px');
     }, 1000);

    2)为「隐藏所有参数」按钮添加点击事件。

    选中该按钮,在右侧属性面板>控件设置>事件中,添加点击事件,如下图所示:

    image.png

    JS 代码如下所示:

    var a= this.options.form.getWidgetByName("a");
    var b= this.options.form.getWidgetByName("b");
    var c= this.options.form.getWidgetByName("c");
    var d= this.options.form.getWidgetByName("d");
    var e= this.options.form.getWidgetByName("e");
    var f= this.options.form.getWidgetByName("f");
    a.setVisible(false);
    b.setVisible(false);
    c.setVisible(false);
    d.setVisible(false);
    e.setVisible(false);
    f.setVisible(false);
    //1秒后隐藏参数面板上的所有参数
    setTimeout(function() {    
    $('.parameter-container').css('height', '105px');  
     $('#content-container').css('top', '105px');
     }, 1000);

    2.4 预览效果

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

    9.gif

    注:该方法不支持移动端。

    3. 模板下载

    已完成的模板,请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\21-JS实现动态隐藏参数以及控制参数面板高度.cpt

    点击下载模板:21-JS实现动态隐藏参数以及控制参数面板高度.cpt

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览