当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据。如下图示例,那么该如何实现呢?本文以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 = '隐藏'。
保存模板,点击分页预览即可看到上图的效果。
相关推荐
1. **产品详情页**:当用户点击“查看详细信息”时,可以通过 Ajax 动态加载并显示产品的详细参数或规格信息,而无需刷新整个页面。 2. **导航菜单**:在一些复杂的网站中,可以通过点击来展开或收起导航菜单,...
通过设置`isVisible`参数为`true`或`false`,可以实现图层的显示和隐藏。例如,`layer.setVisible(false)`会隐藏图层,`layer.setVisible(true)`则使其重新显示。 4. **图层顺序调整**:地图上的图层显示顺序会影响...
你可以使用浮动、定位、flexbox或grid布局来实现tab按钮的水平排列和内容面板的隐藏/显示。使用`:hover`和`active`伪类可以为当前选中的tab按钮添加高亮效果。 3. JavaScript/jQuery 实现:核心的交互逻辑通常由...
4. 如果希望实现更复杂的功能,如多级手风琴或只允许一个面板打开,可能需要用到JavaScript的数据结构(如数组或对象)来跟踪当前打开的面板,并确保每次点击时正确地更新状态。 在给定的文件"texiao5188_...
这可以通过监听按钮点击事件实现。 3. **回退功能**:组件应支持用户回退到之前的步骤,这需要维护一个步骤历史,并在回退时恢复之前的状态。 4. **进度保存**:为了提高用户体验,可以提供进度保存功能,使用户离开...
当用户触发指定事件(如点击按钮或触摸手势)时,侧边栏会以平滑的动画效果从屏幕边缘滑出或隐藏,提升用户界面的交互性和视觉吸引力。动画效果可以通过CSS3的过渡属性(Transition)实现,提供流畅的用户体验。 **...
1. **内容切换**:通过点击不同标签,显示或隐藏相应的面板内容。这种交互方式节省了页面空间,使得用户可以方便地在多个相关但独立的内容之间切换。 2. **动态加载**:如果每个选项卡的内容较大,可以设计为按需...
【jQuery实现的仿QQ Emoji表情包H5插件】是一种基于JavaScript库jQuery的网页组件,主要用于在Web聊天或社交应用中实现类似QQ的表情输入功能。这个插件利用HTML、CSS和JavaScript技术,使得用户能够在输入框中方便地...
这些控件通常会监听用户的鼠标或键盘事件,当用户触发特定事件时(如点击按钮),显示或隐藏日历面板。 2. **设计与实现** - **结构**:日历控件通常由一个触发元素(如按钮或文本框)和一个显示日历的容器组成。...
**动态面板**则用于创建可交互的、多状态的界面元素,例如模拟滑动列表或隐藏/显示内容。 1. **设置事件**:在Axure中,通过为组件添加**事件**(如点击、鼠标悬停等)来触发联动效果。点击事件是最常见的,当用户...
同时,由于页面没有整体刷新,状态管理(如保持用户信息、表单数据)也需要额外考虑,可以利用隐藏字段、ViewBag/ViewData、Session或Cookie等方式来存储和传递状态。 总结来说,C# WebForm实现无刷新前后台交互...
参数值:默认true(开启点击取消功能),false(关闭点击取消功能,必需要点击“取消”按钮才能关闭按钮面板) showBlocktag:显示段落标签 参数值:true(显示段落标签),false(不显示) linkTag:样式链接link标签保留状态...
- 使用HTML和CSS构建UI,通过JavaScript进行交互逻辑处理,如点击日历图标显示/隐藏日历面板,选择日期后更新输入框值。 4. **事件处理**: 使用`addEventListener`监听用户的交互事件,如点击按钮显示日历,点击...
在JMenuTab中,每个Tab是一个可点击的按钮,当用户点击某个按钮时,对应的面板会滑入视图,其他面板则滑出。这一过程通过JavaScript控制元素的显示与隐藏,以及调整元素的位置和动画效果。 **封装性**: JMenuTab...
在Vue.js中,有时我们需要实现一个功能,使得同一个按钮能够控制元素的展开和折叠效果,例如在列表项的详情展示或者折叠面板等场景。这里我们将深入探讨如何利用Vue的响应式数据绑定和事件处理来实现这个功能。 ...
在这个例子中,当用户点击"myButton"时,"myPanel"面板会以滑动的方式展开或关闭。 在实际应用中,我们经常需要添加一些额外的逻辑,比如防止重复点击或者根据某些条件决定是否展开或关闭。这可以通过条件判断或者...