添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
博学的钢笔  ·  JS得到div ...·  1 月前    · 
好帅的山羊  ·  填报JS文档汇总- ...·  1 月前    · 
深情的黄瓜  ·  js获取button的状态 - ·  1 月前    · 
无邪的木瓜  ·  Java Swing ...·  4 月前    · 
豪爽的牛肉面  ·  如何使用Sql ...·  9 月前    · 
  • 社区级协助
  • 文档创建者: yets11
  • 历史版本: 9
  • 最近更新: RosieY 于 2022-08-30
  • 1. 概述

    1.1 预期效果

    有时报表页面显示内容较多时,为了能突出提示某些内容,我们需要一些特殊效果,比如需要实现浏览器标题栏动态滚动效果。如下图所示:

    2020-11-11_13-45-36.gif

    1.2 实现思路

    利用 JS 中 document.title="标题" 方法,结合定时函数功能来设置标题动态展示

    注:适用于后台中存在一个长时间定时刷新的页面,当有内容变化时,通过JS判断,并动态滚动标题栏,来突出显示结果。

    2. 示例

    制作 1.1 图示销量报表,当地区总销售额超过 8000 时,标题栏滚动显示超额完成和总销量,当低于 8000 时,显示正常完成。

    2.1 模板准备

    打开内置模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted.cpt, 在第一行插入一行,在 A1 单元格中输入公式 =D6 ,并设置第一行隐藏,如下图所示

    222

    1603186021178426.png

    2.2 添加 JS 事件

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

    222
    JavaScript 代码如下

    if(window.interval) clearInterval(window.interval);
    //当页面刷新时,清除定时器
    $(function(){  
       var cnt1=$('td[id^=A1]').text();  
            if(parseInt(cnt1)<=8000) {
            t='正常完成!';
            document.title=t;
            return;
            }
            //当销售额小于等于8000时,显示正常
            var t='';
            if(parseInt(cnt1)>8000)
       t="超额完成,销售额为" +parseInt(cnt1)+"元...";
       //当销售额大于8000时,显示超额完成,并且滚动显示
            var s=t.split("");  
            function func1(){    
                s.push(s[0]); //标题中追加一个字符
                s.shift();// 去掉标题中的第一个元素    
                document.title = s.join("");    
            }    
            window.interval=setInterval(func1,1000);//设置时间间隔运行,1秒刷新一次    
    });

    2.3 效果预览

    保存模板,点击「分页预览」,预览如 1.1 节预期效果所示:

    注:不支持移动端。

    3. 模板下载

    已完成模板可参考: %FR_H OME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现报表标题动态滚动效果.frm

    点击下载模板: JS实现报表标题动态滚动效果.cpt