历史版本19 :JS实现普通报表中自动滚屏/跑马灯效果 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 问题描述编辑
对于一些特殊的模板,可能为了展示的更加丰富、全面会在一个页面放置很多图表、表格等内容。由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到js滚屏效果来解决,下面我们来介绍制作方法。
下面我们进行如下设置。
2.1 添加加载结束事件
点击菜单模板>模板web属性>分页预览设置,选择“为该模板单独设置”,添加一个“加载结束”后事件,如下图所示:
js代码如下:
注:使用自定义滚动条插件时(1.2版本),需要将代码中的content-container换成scrollDiv
//从页面加载结束后延迟2000MS执行事件(滚动)
setTimeout(function(){
//当鼠标点击时
$(".content-container").click(function()
{
//如果页面正在执行事件(滚动)
if(interval)
{
//取消事件(滚动)
clearInterval(interval);
}
})
var old=-1;
//按照指定周期不断的调用滚动事件
var interval=setInterval(function()
{
currentpos=$(".content-container")[0].scrollTop;
if (currentpos==old){
//取消事件(滚动)
clearInterval(interval);
//重新加载页面
window.location.reload();
}
else
{
old=currentpos;
//以25MS的速度每次滚动3.5PX
$(".content-container")[0].scrollTop=currentpos+3.5;
}
}
,25);
},2000)
2.2 保存并预览
保存模板,点击分页预览,就会出现上面的自动滚动效果。注:用鼠标左击一下窗口即可停止滚动。
已完成模板可参考:%FR_HOME%\WebReport\WEB-INF\reportlets\demo\newchart\advanced\IOS.cpt
3. 表单报表块设置冻结后自动滚动编辑
3.1 打开报表
打开报表:%FR_HOME%\WebReport\WEB-INF\reportlets\demo\analytics\multi_report\all.frm
3.2 报表块设置
选中表单中的报表块report0,点击工具栏上的冻结,弹出重复与冻结设置对话框,勾选并设置重复标题行从第1行至第2,勾选冻结第1行至第2行,如下图所示:
3.3 添加初始化后事件
选中报表块report0,添加初始化后事件,如下图所示:
js代码如下:
setTimeout(function(){
$("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden";
$("div[widgetname=REPORT0]").find("#frozen-center")[0].style.overflow="hidden";
},100);
//隐藏报表块report0的滚动条
window.flag=true;
setTimeout(function(){
$("#frozen-center").mouseover(function()
{
window.flag=false;
})
//鼠标悬停,滚动停止
$("#frozen-center").mouseleave(function()
{
window.flag=true;
})
//鼠标离开,继续滚动
var old=-1;
var interval=setInterval(function()
{
if(window.flag){
currentpos=$("#frozen-center")[0].scrollTop;
if (currentpos==old){
$("#frozen-center")[0].scrollTop=0;
}
else {
old=currentpos;
$("#frozen-center")[0].scrollTop=currentpos+1.5;
}
}
},25);
//以25ms的速度每次滚动3.5PX
},1000)
js主要实现的功能是:表单报表块在冻结标题行后实现循环滚动,鼠标悬停暂停和鼠标离开继续滚动的效果(隐藏了滚动条)。悬停事件为mouseover,离开事件为mouseleave。
注:1.div[widgetname=REPORT0]")里需根据报表块名称修改,这里是report0;
如未设置冻结标题行,则将$("#frozen-center")替换为$(".reportContent"),安装了自定义滚动条插件的情况下该js不可用。
注意:如果对表单中的多个报表分别写js,只有其中的一个报表块会滚动,其余的只会隐藏滚动条,但不会滚动。
js代码如下:
setTimeout(function(){
//$("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden";
$("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow="hidden";
},100);
window.flag=true;
setTimeout(function(){
$(".reportContent").mouseover(function()
{
window.flag=false;
})
$(".reportContent").mouseleave(function()
{
window.flag=true;
})
var old=-1;
var interval=setInterval(function()
{
if(window.flag){
currentpos=$(".reportContent")[0].scrollTop;
if (currentpos==old){
$(".reportContent")[0].scrollTop=0;
}
else {
old=currentpos;
$(".reportContent")[0].scrollTop=currentpos+1.5;
}
}
},25);
},1000)
3.4 效果预览
保存后,点击预览,效果如下图所示:
关键字:自动滚动 报表块 鼠标悬停