局部区块多个报表 TAB 页切换及局部区块的参数查询

简介: 局部区块多个报表 TAB 页切换及局部区块的参数查询

在企业的业务系统中,如何从纷繁复杂的数据中抽丝剥茧看到关键数据信息呢?一个重要的途径就是将企业和各部门运营中关键的 KPI 集中在一起显示,同时尽量省去在企业的各个业务系统中分别查找数据。
下面是我近期遇到的一个客户实际要求的效果,在一个列表页面中有多个模块,每个模块又可以以多 TAB 页的方式切换不同的报表,并且每个区块都有自己独立的查询过滤条件。在查询条件发生变化的时候,只是该区块刷新,而不需要刷新整个页面。
1

显然,上面截图的效果,通过硬编码或者通过 iframe 嵌套多张报表也是可以实现这样的数据展现效果,但肯定也需要相当的工作量,而且性能和灵活度较差……那么,有没有更快捷、灵活布局的方法呢?
我们知道,润乾报表的报表组是支持多 TAB 页的,同时也是支持参数查询的。通常,我们使用的参数查询条件是通过参数报表实现的,这时报表组中所有报表都共用该参数,而且位置只能在报表组的最上方而不能在每个区块上,因此也做不到局部刷新。 这样,是不是说润乾报表就无法实现客户的这个需求了呢?
当然不是,润乾通过报表组展现多张报表不仅有常规的多 TAB 页方式,还有下拉选择切换,以及 Dashboard 布局的方式展现。而上面的需求就可以通过使用报表组 Dashbord 布局,通过 dashboardlink() 来实现局部刷新。
下面就用个简化的实例来看下如何通过报表组实现一个页面多区块局部刷新的这样的需求吧!
2

  1. 分解页面,做出页面中涉及的报表文件。
    上面截图中分了两个区块:区块一,区块二。

3

区块一有区块标题、3 个 TAB 页签以及与 3 个页签对应显示报表的区域,我们将区块的标题和 TAB 页签做在一个报表中,报表文件名为 T1.rpx。
4

另外分别制作 3 个页签对应的报表,命名为 d1.rpx,d2.rpx,d3.rpx。
5
6
7

区块二中有区块标题,查询条件,数据报表三个部分,我们同样将区块标题和查询条件做在一张报表中,报表文件名为 T2.rpx;
8

D2 单元格的类型为 html, 表达式为
9

数据报表文件名为 d4.rpx.
10

数据报表中定义了一个参数,参数名为“姓名”,类型为字符串
11

数据集将根据该参数动态查询过滤,数据集定义如下:
12
13

  1. 创建报表组设置布局
    新建报表组,添加上面我们做好的 6 张报表。

14

在报表组布局面板中设置报表显示的位置,并设置每一个报表在对应区块的适应方式。
15

保存报表组,在设计器下默认使用 previewDashboard.jsp 来展现经过布局设置的报表组, 而这里我们使用 showDashboard.jsp 来访问该报表。showDashboard.jsp 默认会显示标题和边框,如下图所示。
16

可以通过设置标签属性 needTitle=“no”, 去掉标题,needBorder="no",去掉边框,展现效果如下:
17

  1. 对区块一中的页签报表添加切换操作,选中 B2,C2,D2 单元格,添加超链接表达式,“javascript:dashboardLink(‘board.jsp?board=/00Dashboard/ 销售系统 /d1.rpx’,‘item1’);”
    18
  2. 区块二中针对下拉列表添加查询操作
    19

通过以上设置,我们就已经完成了不同区块多张报表以 TAB 页形式切换,并且区块查询条件相对独立的需求,当每个区块的查询控件值发生变化,下方的数据就会动态的变化的效果。
20

有没有觉得做这种报表有点像做皮影戏的人物?首先,分解出一个人物有哪些部分,分别制作好后上色(报表制作);然后,将制作好后的各组件组装到一起(布局设置),给各关节部位装上木棍(在联动的地方挂上 JS 事件)。这样,这个人影就能在幕布上栩栩如生地呈现了。

目录
相关文章
|
安全 网络安全 API
163邮箱IMAP服务器设置方法
```markdown 使用IMAP协议同步163邮箱:登录邮箱→设置→账户→IMAP/SMTP→开启服务→配置服务器(imap.163.com:993, SSL/TLS)→设置用户名和密码→保存并在邮件客户端添加账号。确保多设备邮件同步,定期更新设置。[≤240字符] ```
|
Web App开发 Java 测试技术
《手把手教你》系列技巧篇(五十六)-java+ selenium自动化测试-下载文件-上篇(详细教程)
【5月更文挑战第20天】本文介绍了自动化测试中如何实现无弹窗下载文件,主要针对Firefox浏览器。作者指出,通常的下载操作包括点击下载按钮,但这里讨论的是避免下载弹窗直接保存文件的方法。文章详细讲解了通过设置Firefox参数(如`browser.download.dir`、`browser.helperApps.neverAsk.saveToDisk`等)来实现这一功能,并给出了Java Selenium的示例代码,展示了如何创建FirefoxProfile并进行相关设置,以及如何启动浏览器和执行下载操作。
313 0
《手把手教你》系列技巧篇(五十六)-java+ selenium自动化测试-下载文件-上篇(详细教程)
|
Linux
Linux基础命令---mput上传ftp文件
mput 使用lftp登录ftp服务器之后,可以使用put指令将文件上传到服务器。mput指令可以使用通配符,而put指令则不可以。 1、语法 mput [-c] [-d] [-a] [-E] [-O base] files 2、选项列表 -d 穿件与文件...
4540 0
linux中 grep过滤查找 及 管道 ”|” 的使用
linux中 grep过滤查找 及 管道 ”|” 的使用
|
11月前
|
机器学习/深度学习 数据采集 人工智能
深入理解SVM中的核函数及其应用
深入理解SVM中的核函数及其应用
517 83
|
12月前
|
存储 C++ 内存技术
解码mp4文件分别存储为pcm,yuv文件
使用FFmpeg库在C++中解码MP4文件,并将音频数据存储为PCM格式,视频数据存储为YUV格式。
140 3
解码mp4文件分别存储为pcm,yuv文件
|
缓存 关系型数据库 MySQL
MySQL 查询优化:提速查询效率的13大秘籍(索引设计、查询优化、缓存策略、子查询优化以及定期表分析和优化)(中)
MySQL 查询优化:提速查询效率的13大秘籍(索引设计、查询优化、缓存策略、子查询优化以及定期表分析和优化)(中)
2179 0
|
11月前
|
传感器 数据处理 数据库
鸿蒙开发Hvigor插件动态生成代码
【11月更文挑战第13天】Hvigor 是鸿蒙开发中的构建系统插件,主要负责项目的构建、打包及依赖管理,并能根据预定义规则动态生成代码,如数据库访问、网络请求等,提高开发效率和代码一致性。适用于大型项目初始化和组件化开发。
355 6
|
11月前
|
芯片
如何根据设备文档和开发板标识来确定 GPIO 引脚的编号
要确定GPIO引脚编号,首先查阅设备的官方文档,了解引脚布局和功能。接着,查看开发板上的标识,如数字或字母标记,对照文档确认具体编号。此过程确保正确连接硬件,避免损坏设备。
|
监控 项目管理
软件项目管理:从计划到成功的实践
【8月更文第20天】在快速变化的IT行业中,高效的软件项目管理是确保项目成功的关键。本文将探讨软件项目管理中的几个核心领域:项目计划与估算、风险管理、人员配置与团队建设以及进度控制与成本管理,并通过具体案例加以说明。
1040 2