欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS实现点击参数面板按钮显示或隐藏数据 博客分类: 报表技术 FineReportJavaScript参数 

程序员文章站 2024-03-12 14:27:38
...

当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据。如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据。

JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
 

打开报表

在参数面板添加一个标签控件,控件名为lable,设置标签控件不可见,控件值为“显示”。

JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
 

在参数面板添加一个按钮控件,控件名为button,控件值为“只显示合计数据”,并添加点击事件。

JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
 

编辑点击事件,添加下面的JavaScript代码:

JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 

/*获取隐藏的标签控件的值*/
var label= this.options.form.getWidgetByName("label").getValue();
 
/*判断标签控件的值*/
if(label=='显示')
{
/*当标签控件的值为显示时,则改为隐藏,并修改按钮名称为显示所有数据*/
this.options.form.getWidgetByName("label").setValue("隐藏");
this.options.form.getWidgetByName("button").setValue("显示所有数据");
}
else
{
/*当标签控件的值不为显示时,则改为显示,并修改按钮名称为只显示合计数据*/
this.options.form.getWidgetByName("label").setValue("显示");        
this.options.form.getWidgetByName("button").setValue("只显示合计数据");
}
 
/*执行查询*/
_g().parameterCommit();

点击参数面板空白处,将“点击查询前不显示报表内容”属性的勾去掉。

JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
 

回到报表设计界面,右键B3单元格,添加条件属性,设置行高为0毫米,添加公式条件为$label = '隐藏'。

JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
 

保存模板,点击分页预览即可看到上图的效果。

  • JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
  • 大小: 29.3 KB
  • JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
  • 大小: 20 KB
  • JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
  • 大小: 17.8 KB
  • JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
  • 大小: 69 KB
  • JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
  • 大小: 7.6 KB
  • JS实现点击参数面板按钮显示或隐藏数据
            
    
    博客分类: 报表技术 FineReportJavaScript参数 
  • 大小: 21.2 KB