`
IT梦想家
  • 浏览: 18154 次
社区版块
存档分类
最新评论

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

阅读更多

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


 

打开报表

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


 

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


 

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

/*获取隐藏的标签控件的值*/
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();

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


 

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


 

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

  • 大小: 29.3 KB
  • 大小: 20 KB
  • 大小: 17.8 KB
  • 大小: 69 KB
  • 大小: 7.6 KB
  • 大小: 21.2 KB
0
0
分享到:
评论

相关推荐

    点击图片 或某一个设置可以控制某一个区域隐藏还是显示(ajax 控制)

    1. **产品详情页**:当用户点击“查看详细信息”时,可以通过 Ajax 动态加载并显示产品的详细参数或规格信息,而无需刷新整个页面。 2. **导航菜单**:在一些复杂的网站中,可以通过点击来展开或收起导航菜单,...

    arcgis api 实现图层控制

    通过设置`isVisible`参数为`true`或`false`,可以实现图层的显示和隐藏。例如,`layer.setVisible(false)`会隐藏图层,`layer.setVisible(true)`则使其重新显示。 4. **图层顺序调整**:地图上的图层显示顺序会影响...

    tabs滑动门 javascript js 单独封装文件

    你可以使用浮动、定位、flexbox或grid布局来实现tab按钮的水平排列和内容面板的隐藏/显示。使用`:hover`和`active`伪类可以为当前选中的tab按钮添加高亮效果。 3. JavaScript/jQuery 实现:核心的交互逻辑通常由...

    简单的商品手风琴动画效果带按钮控制

    4. 如果希望实现更复杂的功能,如多级手风琴或只允许一个面板打开,可能需要用到JavaScript的数据结构(如数组或对象)来跟踪当前打开的面板,并确保每次点击时正确地更新状态。 在给定的文件"texiao5188_...

    jQuery版管理后台步骤面板控制组件(JS特效)

    这可以通过监听按钮点击事件实现。 3. **回退功能**:组件应支持用户回退到之前的步骤,这需要维护一个步骤历史,并在回退时恢复之前的状态。 4. **进度保存**:为了提高用户体验,可以提供进度保存功能,使用户离开...

    jQuery响应式隐藏滑动侧边栏插件

    当用户触发指定事件(如点击按钮或触摸手势)时,侧边栏会以平滑的动画效果从屏幕边缘滑出或隐藏,提升用户界面的交互性和视觉吸引力。动画效果可以通过CSS3的过渡属性(Transition)实现,提供流畅的用户体验。 **...

    js选项卡(。net可用)

    1. **内容切换**:通过点击不同标签,显示或隐藏相应的面板内容。这种交互方式节省了页面空间,使得用户可以方便地在多个相关但独立的内容之间切换。 2. **动态加载**:如果每个选项卡的内容较大,可以设计为按需...

    通过jQuery实现的仿QQ Emoji表情包H5插件

    【jQuery实现的仿QQ Emoji表情包H5插件】是一种基于JavaScript库jQuery的网页组件,主要用于在Web聊天或社交应用中实现类似QQ的表情输入功能。这个插件利用HTML、CSS和JavaScript技术,使得用户能够在输入框中方便地...

    js 日历控件 三个可用的

    这些控件通常会监听用户的鼠标或键盘事件,当用户触发特定事件时(如点击按钮),显示或隐藏日历面板。 2. **设计与实现** - **结构**:日历控件通常由一个触发元素(如按钮或文本框)和一个显示日历的容器组成。...

    axure手机界面-二次联动效果

    **动态面板**则用于创建可交互的、多状态的界面元素,例如模拟滑动列表或隐藏/显示内容。 1. **设置事件**:在Axure中,通过为组件添加**事件**(如点击、鼠标悬停等)来触发联动效果。点击事件是最常见的,当用户...

    c# webform无刷新前后台交互

    同时,由于页面没有整体刷新,状态管理(如保持用户信息、表单数据)也需要额外考虑,可以利用隐藏字段、ViewBag/ViewData、Session或Cookie等方式来存储和传递状态。 总结来说,C# WebForm实现无刷新前后台交互...

    xheditor-1.1.14

    参数值:默认true(开启点击取消功能),false(关闭点击取消功能,必需要点击“取消”按钮才能关闭按钮面板) showBlocktag:显示段落标签 参数值:true(显示段落标签),false(不显示) linkTag:样式链接link标签保留状态...

    js日期控件

    - 使用HTML和CSS构建UI,通过JavaScript进行交互逻辑处理,如点击日历图标显示/隐藏日历面板,选择日期后更新输入框值。 4. **事件处理**: 使用`addEventListener`监听用户的交互事件,如点击按钮显示日历,点击...

    JMenuTab

    在JMenuTab中,每个Tab是一个可点击的按钮,当用户点击某个按钮时,对应的面板会滑入视图,其他面板则滑出。这一过程通过JavaScript控制元素的显示与隐藏,以及调整元素的位置和动画效果。 **封装性**: JMenuTab...

    vue同个按钮控制展开和折叠同个事件操作

    在Vue.js中,有时我们需要实现一个功能,使得同一个按钮能够控制元素的展开和折叠效果,例如在列表项的详情展示或者折叠面板等场景。这里我们将深入探讨如何利用Vue的响应式数据绑定和事件处理来实现这个功能。 ...

    JS使用百度地图API自动获取地址和经纬度操作示例

    按钮的点击事件通过`onclick`属性绑定相应的JavaScript函数来实现地图的显示与隐藏。 在JavaScript代码部分,首先定义了验证表单数据的`validate`函数,该函数检查用户是否已经选择了地址,如果没有,则通过弹窗...

Global site tag (gtag.js) - Google Analytics