JS实现报表标题动态滚动效果

编辑
  • 文档创建者:yets11
  • 浏览次数:6425次
  • 编辑次数:5次
  • 最近更新:Kevin-s 于 2019-06-22
  • 1. 概述

    有时报表页面显示内容较多时,为了能突出提示某些内容,我们需要一些特殊效果,比如需要实现浏览器标题栏动态滚动效果,防止在其他页面时看不到页面消息的变化,要求当地区总销售额超过 8000 时,标题栏滚动突出显示,当低于 8000 时,显示正常完成,如下图

    222


    2. 实现思路

    利用 JS 中设置标题的方法document.title="标题"

    但是这种方法设置出来的标题是静态的,无法动态显示,我们需要对这个方法进行处理,结合定时函数功能来变换显示标题。


    3. 示例

    3.1 模板准备

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

    222


    3.2 添加加载结束事件

    222
    JS 代码如下

    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="超额完成,销售额为"+cnt1+"元...";
       //当销售额大于8000时,显示超额完成,并且滚动显示
            var s=t.split("");  
            function func1(){    
                s.push(s[0]); //标题中追加一个字符
                s.shift();// 去掉标题中的第一个元素    
                document.title = s.join("");    
            }    
            window.interval=setInterval(func1,1000);//设置时间间隔运行,1秒刷新一次    
    });


    3.3 保存预览

    保存后,预览效果如上

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


    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]