例如Demo:IOS平台年度数据报表。

展示内容丰富,一个页面中存在多个图表、内容,超出了浏览器窗口的大小导致内容展示不全。

为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现。

操作步骤:

点击菜单模板→模板web属性→分页预览设置→为改模板单独设置→添加“加载结束”事件

JS脚本代码:

 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)

保存模板,点击分页预览就会实现自动滚动效果。如果想要停止滚动,鼠标左键点击页面即可。

帆软报表(finereport)实现自动滚屏效果的更多相关文章

  1. 帆软报表FineReport中数据连接的JDBC连接池属性问题

    连接池原理 在帆软报表FineReport中,连接池主要由三部分组成:连接池的建立.连接池中连接使用的治理.连接池的关闭.下面就着重讨论这三部分及连接池的配置问题. 1. 连接池原理 连接池技术的核心 ...

  2. 帆软报表FineReport SQLServer数据库连接失败常见解决方案

    1. 问题描述 帆软报表FineReport客户端连接SQLServer(2000.2005等),常常会出现如下错误:com.microsoft.sqlserver.jdbc.SQLServerExc ...

  3. 帆软报表FineReport中数据连接之Weblogic配置JNDI连接

    1. 制作报表的原理 在帆软报表FineReport设计器中先用JDBC连接到数据库,建立数据库连接,然后用SQL或者其他方法创建数据集,使用数据集制作报表,然后把建立的数据库连接从JDBC连接改成J ...

  4. 帆软报表FineReport中数据连接之Jboss配置JNDI连接

    使用sqlsever 2000数据库数据源来做实例讲解,帆软报表FineReport数据连接中Jboss配置JNDI大概的过程和WEBSPHERE以及WEBLOGIC基本相同,用JDBC连接数据库制作 ...

  5. 帆软报表FineReport中数据连接之Websphere配置JNDI连接

    以oracle9i数据源制作的模板jndi.cpt为例来说明如何在FineReport中的Websphere配置JNDI连接.由于常用服务器的JNDI驱动过大,帆软报表FineReport中没有自带, ...

  6. 帆软报表FineReport中数据连接之Tomcat配置JNDI连接

    1. 问题描述 在帆软报表FineReport中,通过JNDI方式定义数据连接,首先在Tomcat服务器配置好JNDI,然后在设计器中直接调用JNDI的名字,即可成功使用JNDI连接,连接步骤如下: ...

  7. FineReport中如何实现自动滚屏效果

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

  8. jquery实现自动滚屏效果,适用用公告新闻等滚屏

    从网络上找到的例子,自己做了下扩展,原示例是向上滚动,扩展了一个向下滚动的方法: <html xmlns="http://www.w3.org/1999/xhtml"> ...

  9. 帆软报表(FineReport)实现跨数据源父子查询(2阶段查询)

    问题描述: 在报表中需要查询多个系统多个数据源,且有一个数据源的入参是另一个数据源的返回值.所以当用户点击查询到展现报表数据这个过程中,需要先做父查询,查询出的结果在作为子查询. 实现方案: 方案一: ...

随机推荐

  1. 【递归】hex2dec

    自己捉摸了好久,由于不熟悉. #include <stdio.h> int dec2hex(char *p); int base; int num; int main(void) { ch ...

  2. Education CodeForces Round 63 Div.2

    A. Reverse a Substring 代码: #include <bits/stdc++.h> using namespace std; int N; string s; int ...

  3. python3 使用ssl安全连接发送邮件

    今天在测试,阿里云服务器发邮件时,发现使用默认的25端口,邮件无法正常发送,查了相关的资料,才知道,大部分的云服务器都会禁用25端口,所以才想到使用ssl 发送. 下面为具体的python3 使用ss ...

  4. Virtual DOM 系列二:核心API

    为了更好的研究Virtual DOM,我选择了snabbdom来学习.相比Vue来说,snabbdom对于研究虚拟DOM更好,因为它里面没有其他干扰的东西,而且源码也比较少,因此研究起来更方便. 1. ...

  5. Ubuntu16设置Redis开机自启动

    Ubuntu16设置Redis开机自启动   Ubuntu16设置Redis开机自启动 设置条件: -Ubuntu16.04 -Redis-4.0.11 在redis目录下找到  utils/redi ...

  6. 微信小程序工具类

    wechat-common-sdk ? 场景:目前工作中的项目需要包含并使用另一个项目. 也许是第三方库,或者你独立开发的,用于多个父项目的库. 现在问题来了:你想要把它们当做两个独立的项目,同时又想 ...

  7. 图像风格迁移(Pytorch)

    图像风格迁移 最后要生成的图片是怎样的是难以想象的,所以朴素的监督学习方法可能不会生效, Content Loss 根据输入图片和输出图片的像素差别可以比较损失 \(l_{content} = \fr ...

  8. nodejs使用vue从搭建项目到发布部署

    都说是使用vue 脚手架自然用的是vue-cli npm install vue-cli -g 建立项目 vue init webpack demo //vue初始化 使用webpack 项目名称 这 ...

  9. 关于python深浅拷贝的个人浅见

    起初,关于python的深浅拷贝,总是习惯去用传值传址的方式去考虑,发现总是get不到规律,容易记混. python有着高度自治的内存管理,而不可变对象的内存分配,则是能省则省,就是说,无论用什么拷贝 ...

  10. Inheritance: 'A' is an inaccessible base of 'B'

    'boost::enable_shared_from_this<net::Session>' is an inaccessible base of 'net::Session' BOOST ...