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

帆软报表(finereport)JS实现点击参数面板按钮显示或隐藏数据 随笔 第1张

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

打开报表

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

帆软报表(finereport)JS实现点击参数面板按钮显示或隐藏数据 随笔 第2张

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

帆软报表(finereport)JS实现点击参数面板按钮显示或隐藏数据 随笔 第3张

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

 帆软报表(finereport)JS实现点击参数面板按钮显示或隐藏数据 随笔 第4张

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /*获取隐藏的标签控件的值*/ 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();

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

帆软报表(finereport)JS实现点击参数面板按钮显示或隐藏数据 随笔 第5张 

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

帆软报表(finereport)JS实现点击参数面板按钮显示或隐藏数据 随笔 第6张

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

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄