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

1.1 预期效果

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

1.2 实现思路

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

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

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

2.1 模板准备

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

2.2 添加 JS 事件

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

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 节预期效果所示：

注：不支持移动端。

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

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