例如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. To B Vs To C

    谈谈 To B 业务的难点https://tangjie.me/blog/259.html

  2. php函数 array_count_values

    (PHP 4, PHP 5, PHP 7) array_count_values — 统计数组中所有的值 array_count_values ( array $array ) : array arr ...

  3. 【学亮编程手记】Spring Cloud三大组件Eureka/Feign/Histrix的原理及使用

  4. js定时器 实现提交成功提示

    应用场景: 用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" st ...

  5. Ffmpeg使用

    ffmpeg官网 刚开始安装的推荐博客|--利用FFmpeg 开发音视频流:一.二.三 1.分辨率码率 主要视频格式与码率: 分辨率 200p——对应的码率是256kpbs,也就是说,一分钟需要流量1 ...

  6. 上传图片,通过node服务器存储在指定目录

    最近做毕设,需要上传图片,因为在本地服务器运行,所以想着前端上传后,通过node服务器接收图片,存储在指定的目录下. 一.前端实现 1.前端的页面和上传图片是利用element-ui组件实现的,&qu ...

  7. KEIL之工程单独文件属性修改

    @2019-04-29 [小记] 可以设置文件是否参与编译.内存分配.宏定义等属性设置

  8. TJOI2018Party

    题目描述 小豆参加了\(NOI\)的游园会,会场上每完成一个项目就会获得一个奖章,奖章 只会是\(N\), \(O\), \(I\)的字样.在会场上他收集到了\(K\)个奖章组成的串. 兑奖规则是奖章 ...

  9. BZOJ 2302: [HAOI2011]Problem c(数学+DP)

    题面: bzoj_2302 题解: 令\(dp[i][j]\)表示编号 \(\leq i\)的人有j个的方案数: \(cnt[i]\)表示编号指定为\(i\)的人数,\(sum[i]\)表示编号可以\ ...

  10. ElasticSearch常用操作

    查看某个INDEX库某个TYPE表,某个字段的分词结果  GET /${index}/${type}/${id}/_termvectors?fields=${fields_name}http://19 ...