历史版本1 :JS实现报表标题动态滚动效果 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

一 概述编辑

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


222

二 实现思路

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

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


三 实现过程编辑

3.1 修改模板

以内置GettingStarted.cpt模板为例打开模板%FR_HOME%\WebReport\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判断,并动态滚动标题栏,来突出显示结果。