报表实时显示时间

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

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

其实,要在报表中做到上面的效果很简单,基本思路就是让页面定时(比如每隔一秒钟)调用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改变单元格的值的方式,可以实现页面局部内容的动态变化,而且没有闪烁刷新,毫无违和感!

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

原文地址:https://www.cnblogs.com/raqsoft2000/p/9292912.html

时间: 2024-11-08 19:48:55

报表实时显示时间的相关文章

JavaScript实现页面实时显示时间

今天尝试了一下JavaScript实现页面实时显示时间 运用了 setInterval() 函数 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式 setInterval("getTime()",1000); 以1000毫秒间隔调用函数有一个问题就是刚打开页面时的1s会不显示 为此我们可以在之前先调用一遍函数 getTime(); 这样无论何时都能实时显示时间啦 .html代码如下 <!DOCTYPE html> <html lang

js页面实时显示时间

1.通过getMonth()实现获取月份,从0开始计数,需要+1: 2.通过getDay()实现获取星期天数,从0开始,0表示星期日: 3.通过getDate()获取日期. 4.setTimeout(time1,1000);   1秒 5.在div中显示<div id="inn"></div>,使用.innerHTML实现赋值: 在使用<input id="inn" type="text" />,使用.valu

实时显示系统时间

1.概述 在浏览很多网站时,都会发现在网站中加入了显示当前系统时间的功能,在网页中显示当前系统时间,不仅可以方便浏览者掌握当前时间,而且还美化了网页. 2.技术要点 利用Date对象来实现.首先创建一个表示当前系统时间的Date()对象,然后通过Date对象的getXxx()方法获得当前系统时间的年.月.日.小时.分.秒和星期的值,接下来将获得的这些值组合成一个日期时间字符串,并将日期时间字符串设置成为<div>标签的内容,最后通过window对象的setTimeout()函数每隔1秒调用一个

js实时显示系统时间

刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>function clockon(contentDate){    var now = new Date();    var year = now.getYear();    var month = now.getMonth();    var date = now.getDate();    var day = now.

FPGA学习之数码管(封装)显示时间

一.实验目的:学习数码管封装以及显示时间.二.实验环境:FPGA开发板AX301,Quartus ii三.实验介绍:将数码管显示模块封装起来,同时通过不断读取RTC时钟的时分秒值,将之显示在数码管.实验时,将实时时间的时分秒写入程序,运行程序后可以看到数码管显示的时间会不断的刷新.四.源码 module smg_interface_demo ( input CLK, input RSTn, output RST, output SCLK, inout SIO, output [7:0]SMG_D

运维开发:python websocket网页实时显示远程服务器日志信息

功能:用websocket技术,在运维工具的浏览器上实时显示远程服务器上的日志信息 一般我们在运维工具部署环境的时候,需要实时展现部署过程中的信息,或者在浏览器中实时显示程序日志给开发人员看.你还在用ajax每隔段时间去获取服务器日志?out了,试试用websocket方式吧 我用bottle框架,写了个websocket服务端,浏览器连接到websocket server,再用python subprocess获取远程服务器的日志信息,subprocess,就是用Popen调用shell的sh

分贝显示器,实时显示声音强度(附源码)

使用 摄像头.麦克风.扬声器测试程序 一文中提到的技术,我们可以基本实现QQ的语音视频测试向导的功能了.但是,我觉得语音测试这块的体验还可以做得更好一点,就像QQ语音测试一样,实时显示麦克风采集到的声音的强度: 接下来,我们做个小demo,来实现类似的功能.先上demo运行起来的截图: (界面确实比较丑,我们这里的重点在于技术方面如何实现,如果你愿意花点时间,可以将其美化得跟QQ的那个一样漂亮^_^) 1.实现思路 实现这个小例子的主要思路如下: (1)使用OMCS采集和播放从麦克风的输入数据(

asp 之 让实体中字段类型为DateTime的字段只显示日期不显示时间

       在我们平时的工作开发中,我们通常会遇到这样的一个问题:某个实体的某个字段是DateTime类型的,可是我们在界面上只想让它显示日期不显示时间! 一个订单实体: //订单类 public class order { //订单ID public int id{get;set;} //物品ID public int resId{get;set;} //物品名称 public string resName { get; set; } //物品价格 public decimal price

php 中date显示时间不对与Linux文件乱码问题

php 中date显示时间不对解决办法如下1.修改/etc/php.ini文件 在里头中找到data.timezone =去掉它前面的分号';' 然后设置data.timezone = "Asia/Shanghai";即可 2.在程序代码中使用函数date_default_timezone_set('Asia/Shanghai'); 或者date_default_timezone_set('PRC'); 即可 LINUX 系统显示中文文件乱码 解决办法如下 1.永久解决 输入local