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

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

打开报表

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

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

编辑点击事件，添加下面的JavaScript代码：

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

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js点击页面其它地方将某个显示的DIV隐藏

    实现也很简单,但需要注意的是,在点击显示的事件中,需要做阻止事件冒泡的处理,否则就触发页面的点击事件了.但这样做也有一个缺点,即如果同一个页面中如果也有事件阻止冒泡,则不能隐藏DIV,所以在这样的事件中需要特殊处理下:自己调用隐藏下DIV(但正常来说这样的事件并不多): JS: 复制代码 代码如下: $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(function(e) {

  • js实现的点击超链显示隐藏层

    点击链接,显示提示框,提示框里也有链接可点击. 鼠标移开链接或者移开提示框,提示框就隐藏. 下面这个我写的不能自适应,如果菜单左对齐,显示层能否自动在右边显示?应该怎样调整JS? test body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decorati

  • vueJS简单的点击显示与隐藏的效果【实现代码】

    目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好 感觉跟适合. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if.v-else.v-show&l

  • js菜单点击显示或隐藏效果的简单实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • js中点击空白区域时文本框与隐藏层的显示与影藏问题

    当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <

  • JAVASCRIPT 点击显示 隐藏层

    JAVASCRIPT 点击显示 隐藏层

    点击显示/隐藏层 //code from www.jb51.net a{text-decoration:none;} .tab{border:1px solid #e57243;border-top:0;margin:10px 0;text-align:left;width:200px;font-size:14px;} .th{border-top:1px solid #e57243;padding:5px;font-weight:700;clear:both;background:#f5e1d

  • javascript点击按钮实现隐藏显示切换效果

    javascript点击按钮实现隐藏显示切换效果

    本文实例分享了点击按钮实现隐藏和显示的切换代码,供大家参考,具体内容如下 效果图: 在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下: <html> <head> <meta charset="gb2312"> <title>隐藏和显示</title> <style type="text/css"> #thediv

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

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

    当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板添加一个标签控件,控件名为lable,设置标签控件不可见,控件值为"显示". 在参数面板添加一个按钮控件,控件名为button,控件值为"只显示合计数据",并添加点击事件. 编辑点击事件,添加下面的JavaScript代码: 点击参数面板空白处,将"点击查询前

  • jquery实现点击按钮显示与隐藏效果

    jquery实现点击按钮显示与隐藏效果

    本文实例为大家分享了jquery实现点击按钮显示与隐藏的具体代码,供大家参考,具体内容如下 首先来看实现效果 用jquery来实现这种效果是非常简单的 html <div class="bottom">       <ul>         <li class="active">            <span class="iconfont icon-yemian-copy-copy"><

  • layui radio点击事件实现input显示和隐藏的例子

    如下所示: 前端代码 <link rel="stylesheet" href="/static/index/layui/css/layui.css" rel="external nofollow" > <script type="text/javascript" src="/static/index/layui/layui.js" charset="utf-8">

  • elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

    在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容 当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下: <!-- 数据表格 --> <el-table :data="tableData" class="table" stripe border v-loading="loading"> <el-table-column type="ind

  • Jquery 点击按钮显示和隐藏层的代码

    代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"

  • 基于vue 实现表单中password输入的显示与隐藏功能

    实现效果: 点击 "眼睛" 的时候显示与隐藏 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

  • JS/jQuery实现默认显示部分文字点击按钮显示全部内容

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id="box"> <h2>民间机构提前3天预报大理地震 地震局称违法</h2> <p&g

  • 原生JS实现隐藏显示图片 JS实现点击切换图片效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

随机推荐