反馈已提交

网络繁忙

JS实现普通报表显示实时时间

  • 文档创建者:静听禅鸣
  • 编辑次数:35次
  • 最近更新:Catqiu 于 2022-07-26
  • 1. 概述

    1.1 问题描述

    如果想在报表里实时显示时间,该如何实现呢?如下图所示:


    1.2 实现思路

    获取当前的时间,一秒刷新一次报表,将当前时间显示在某个单元格中。

    2. 示例一

    普通报表中通过添加 JS 实现 ,JS 代码中每秒获取一次时间。

    注:决策报表示例请参见文档 JS实现决策报表显示实时时间

    2.1 准备模板

    新建模板,调整单元格高宽布局,准备让时间实时显示在 C4 单元格中,为效果明显,给 C4 单元格添加边框,如下图所示:


    2.2 添加事件

    点击「模板>模板 Web 属性>填报页面设置」,选择「为该模板单独设置」,添加一个「加载结束」事件,如下图所示:

    image.png

    JavaScript 代码如下:

    注:JS 代码中,设置实时事件显示在 C4 单元格,使用时可根据实际情况修改,此 JS 的优点是每秒只刷新指定的单元格,页面其他内容不会受到影响。

    //每秒执行一次
    setInterval(function() {
    //将当前时间赋值给M
        var M = FR.remoteEvaluate('FORMAT(now(),"yyyy-MM-dd HH:mm:ss")');
        //给C4单元格赋值M
        _g().setCellValue("C4", null, M);
    }, 1000);

    2.3 预览效果

    保存模板,点击「填报预览」,为效果明显,单元格添加了边框,效果如下图所示:

    注:不支持移动端


    3. 示例二

    3.1 准备模板

    新建模板,调整单元格高宽布局,准备让时间实时显示在 A1 单元格中,为效果明显,给 A1 单元格添加边框。

    3.2 添加事件

    点击「模板>模板 Web 属性>填报页面设置」,选择「为该模板单独设置」,添加一个「加载结束」事件,如下图所示:

    image.png

    JavaScript 代码如下:

    注:JS 代码中,设置实时事件显示在 A1 单元格,使用时可根据实际情况修改。

    function Appendzero(obj)   
        {  
            if(obj<10) return "0" +""+ obj; //判断obj是否小于10,如果小于10,则在数字前面加上"0"补位  
            else return obj;   
        }    
    FR.CLOCK = function(cell)  
    {   
        var cl = $('[id^='+cell+'-]');  
    //因为后面调用使用了 FR.CLOCK('A1'),即得到A1的句柄  
        setInterval(function(){   
            var date=new Date();//获取当时日期  
            var format=date.getFullYear()+"-"+Appendzero(date.getMonth()+1)+"-"+Appendzero(date.getDate())+" "+Appendzero(date.getHours())+":"+Appendzero(date.getMinutes())+":"+Appendzero(date.getSeconds());//format 是一个数符串,把年-月-日 小时:分钟:秒组合到一起了,调用了Appendzero()函数,进行补位操作  
            cl.html(format);   
    //C1,传来的单元格,使单元格里显示日期  
        },1000);  
    //1000毫秒=1秒,即1秒钟刷新一次   
    } ;   
    FR.CLOCK('A1');  
    //这里是关键,A1是传的单元格,传给CLOCK方法

    3.3 预览效果

    保存模板,点击「填报预览」,为效果明显,单元格添加了边框,效果如下图所示:

    注:不支持移动端。

    4. 模板下载

    1)第一段 JS 示例:

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\30-JS显示即时或实时时间示例一.cpt

    点击下载模板:30-JS显示即时或实时时间示例一.cpt

    2)第二段 JS 示例:

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\30-JS显示即时或实时时间示例二.cpt

    点击下载模板:30-JS显示即时或实时时间示例二.cpt

    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    7*24h

    智 能客 服