JS实现点击参数面板按钮显示或隐藏数据

简介:

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


 

打开报表

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


 

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


 

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

1
<span style= "font-family:'微软雅黑', 'Microsoft YaHei';font-size:14px;" > /*获取隐藏的标签控件的值*/ <br> var  label=  this .options.form.getWidgetByName( "label" ).getValue();<br><br> /*判断标签控件的值*/ <br> if (label== '显示' )<br>{<br> /*当标签控件的值为显示时,则改为隐藏,并修改按钮名称为显示所有数据*/ <br> this .options.form.getWidgetByName( "label" ).setValue( "隐藏" );<br> this .options.form.getWidgetByName( "button" ).setValue( "显示所有数据" );<br>}<br> else <br>{<br> /*当标签控件的值不为显示时,则改为显示,并修改按钮名称为只显示合计数据*/ <br> this .options.form.getWidgetByName( "label" ).setValue( "显示" );        <br> this .options.form.getWidgetByName( "button" ).setValue( "只显示合计数据" );<br>}<br><br> /*执行查询*/ <br>_g().parameterCommit();<br></span>

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


 

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


 

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



本文转自 雄霸天下啦 51CTO博客,原文链接:http://blog.51cto.com/10549520/1904251,如需转载请自行联系原作者

相关文章
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
4天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
19 7
|
8天前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
46 10
|
10天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
28天前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
32 7
|
28天前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
45 4
|
2月前
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
26 3
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
22 0
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)