JS实现普通报表中自动滚屏/跑马灯效果 FineReport帮助文档|报表开发|报表使用|学习教程

历史版本31 :JS实现普通报表中自动滚屏/跑马灯效果返回文档

编辑时间:03-20 16:33 历史版本: 最新历史版本上一篇历史版本下一篇历史版本 内容长度:26318 图片数:7目录数:4 修改原因:全文编辑

1. 描述
2. 操作步骤
3. 预览效果
4. 已完成模板

1. 描述编辑

对于一些特殊的模板，可能为了展示的更加丰富、全面会在一个页面放置很多图表、表格等内容。由于内容过多，超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到js滚屏效果来解决，下面我们来介绍制作方法。

2. 操作步骤编辑

2.1示例一：普通报表的自动滚屏/滚动

添加加载结束事件

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

js代码如下：

注：使用自定义滚动条插件时（1.2版本），需要将代码中的content-container换成scrollDiv

setTimeout(function(){ //鼠标点击结束 $('.content-container').click(function(){ if(timer){ clearInterval(timer); } }) var h=-1; var timer = setInterval(function(){ //获取当前滚动条高度 var current = $('.content-container')[0].scrollTop; if(current==h){ //滚动到底端，刷新屏幕，并返回顶端 clearInterval(timer); window.location.reload(); contentPane.$contentPane.scrollTop(0); } else { //以25ms/3.5px的速度滚动 h=current; $('.content-container')[0].scrollTop=h+3.5; } },25); },2000)

2.2 示例二：冻结设置下的自动滚屏/滚动（鼠标悬停）方法一

示例一预览的时候，鼠标点击之后，滚动会停止；鼠标移开，并不会再次滚动。

在此基础上，如果想实现鼠标悬停的效果，我们需要修改js代码。

添加加载事件：

点击模板>模板Web属性>填报页面设置，选择为该模板单独设置，添加加载结束事件，如下图所示：

js代码:

if(window.interval2){clearInterval(window.interval2);} setTimeout(function(){ $("#frozen-center").mouseover(function() { window.flag=false; }) //鼠标悬停，滚动停止 $("#frozen-center").mouseleave(function() { window.flag=true; }) //鼠标离开，继续滚动 var old=-1; window.interval2=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)

2.3 示例三：冻结设置下的自动滚屏/滚动方法二

添加内置数据集

点击模板>模板数据集，添加一个内置数据集，如下图所示：
222

添加加载事件：

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

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)