当前位置: 首页 > news >正文

报表实时刷新显示时间

报表,除了相对静态地展现汇总统计数据以及分布、趋势等数据内容外,也可以用于显示和时间相关的即时信息,包括实时显示时间。例如,下面这个设备监控应用统系中,首页除了显示实时监控数据外,还需要在右上角显示实时时间:

这种形式的“动态报表”其实在我们生活中也随处可见,最常见的就是火车站大屏幕上的列车时刻表,上面显示的当前时间,让旅客能够一目了然地知道自己的列车还有多长时间开,等待的列车什么时候到。

其实,要在报表中做到上面的效果很简单,基本思路就是让页面定时(比如每隔一秒钟)调用 JS 方法,在 JS 中通过单元格的 ID 获取到显示时间的那个格子,将当前时间作为这个格子的新值显示就可以了。


下面,我们就具体看看如何通过润乾报表实现这样司空见惯的动态显示时间效果。

1、设置报表单元格表达式

前面第一个图是在润乾报表设计器自带的报表“设备故障分析.rpx”的基础上实现的,接下来我们就用这个报表作为例子进行说明。我们首先在自带报表中添加时间,合并 N4、O4 单元格,并在该合并格中设置单元格表达式 =string(now(),”yyyy 年 MM 月 dd 日 hh:MM:ss”)。

2、设置 JSP 页面标签

然后,我们打开报表展现页面 showReport.jsp,在这个页面中设置标签属性 generateCellId,以便报表单元格在页面生成格子的 ID。

打开原始的报表展现页面,我们发现设置当前时间的单元格,并没有生成对应的 ID,如下图所示:

为了在 JS 脚本中能够通过 ID 可以获得到该单元格,以便修改该单元格的值,我们需要在展现的页面中添加标签属性 generateCellId=”yes”,如下图所示:

设置了该属性后,我们可以在页面中可以看到,该单元格生成了对应的 id 值:

3、设置页面 JS 方法

接下来,我们在在报表展现的页面中添加动态改变单元格值的 JS 方法 myrefresh(), 在这个方法中通过单元格的 ID 动态改变该单元格中的显示时间,同时通过 setTimeout() 在 1 秒后调用函数 myrefresh。由于 setTimeout()函数只会被调用一次,所以我们还需要在 myrefresh() 函数体中也加上这个函数,从而达到循环调用的效果,下面是具体的 JS 方法:

function myrefresh()

{

var tbl = document.getElementById(“report1_N12”);

var myDate = new Date();

tbl.innerHTML=myDate.toLocaleString( );

setTimeout(‘myrefresh()’,1000);

}

setTimeout(‘myrefresh()’,1000);

4、预览页面效果

. 这样,经过以上的简单设置,我们就可以在 showReport.jsp 页面中展现“设备故障分析.rpx”报表,并且在页面上方看到实时变化的时间了,页面效果如下:

通过这个简单的例子,我们知道,就像开篇所说,报表不仅能够呈现固定的统计汇总数据,还有相当不错的动态展示能力。我们在这里使用的定时调用 JS 改变单元格的值的方式,可以实现页面局部内容的动态变化,而且没有闪烁刷新,毫无违和感!

怎么样,意不意外?惊不惊喜?让我们赶紧撸起袖子利用报表让数据展现更加丰富起来吧!


详情链接:http://c.raqsoft.com.cn/article/1533395680659?r=gxy

相关文章:

  • Linux SVN服务器的搭建配置及分支的创建与合并
  • 线程的定时器Timer
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • PhpStudy的安装及使用教程
  • [PHP] 算法-顺时针打印矩阵的PHP实现
  • Java集合-HashMap扰动函数
  • Django-jet自定义菜单
  • 解决org.apache.hadoop.hbase.MasterNotRunningException
  • Vue CLI 3开发中屏蔽烦人的EsLint错误
  • 搞定所有的跨域请求问题: jsonp CORS
  • 开源运维管理平台(ows) damo版本源码发布
  • 精彩回顾 | 阿里云APM城市技术行·深圳站
  • ballerina 学习 三十一 扩展开发(二)
  • ES7 之 Async/await 的使用(改进 Promise 链式操作)
  • LAMP+Postfix+Dovecot+Postfixadmin搭建邮件管理系统(三)
  • [PHP内核探索]PHP中的哈希表
  • Android开源项目规范总结
  • Docker 笔记(1):介绍、镜像、容器及其基本操作
  • Javascript 原型链
  • JavaScript实现分页效果
  • leetcode-27. Remove Element
  • OpenStack安装流程(juno版)- 添加网络服务(neutron)- controller节点
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 浮动相关
  • 高程读书笔记 第六章 面向对象程序设计
  • 模仿 Go Sort 排序接口实现的自定义排序
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 数据结构java版之冒泡排序及优化
  • 用jQuery怎么做到前后端分离
  • 走向全栈之MongoDB的使用
  • ​软考-高级-信息系统项目管理师教程 第四版【第14章-项目沟通管理-思维导图】​
  • #if和#ifdef区别
  • (01)ORB-SLAM2源码无死角解析-(66) BA优化(g2o)→闭环线程:Optimizer::GlobalBundleAdjustemnt→全局优化
  • (2022 CVPR) Unbiased Teacher v2
  • (办公)springboot配置aop处理请求.
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (二)windows配置JDK环境
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (过滤器)Filter和(监听器)listener
  • (转)四层和七层负载均衡的区别
  • .bat批处理(八):各种形式的变量%0、%i、%%i、var、%var%、!var!的含义和区别
  • .CSS-hover 的解释
  • .gitignore文件_Git:.gitignore
  • .mysql secret在哪_MYSQL基本操作(上)
  • .NET3.5下用Lambda简化跨线程访问窗体控件,避免繁复的delegate,Invoke(转)
  • /proc/vmstat 详解
  • @DataRedisTest测试redis从未如此丝滑
  • @html.ActionLink的几种参数格式
  • @RestController注解的使用
  • [ Linux 长征路第二篇] 基本指令head,tail,date,cal,find,grep,zip,tar,bc,unname
  • [ 蓝桥杯Web真题 ]-布局切换
  • [23] GaussianAvatars: Photorealistic Head Avatars with Rigged 3D Gaussians
  • [boost]使用boost::function和boost::bind产生的down机一例
  • [C#]OpenCvSharp结合yolov8-face实现L2CS-Net眼睛注视方向估计或者人脸朝向估计
  • [C#]使用DlibDotNet人脸检测人脸68特征点识别人脸5特征点识别人脸对齐人脸比对FaceMesh