反馈已提交

网络繁忙

JS实现普通报表中自动滚屏/跑马灯效果

  • 文档创建者:zsh331
  • 历史版本:49
  • 最近更新:HeroZ 于 2023-02-01
  • 1. 概述

    1.1 版本

    报表服务器版本
    功能变更
    11.0-

    1.2 预期效果

    报表浏览页面上放置很多图表时,由于内容过多,超出了浏览器窗口的大小导致内容展示不全,这时可以使用滚屏或跑马灯来实现内容全部展示,如下图所示:

    2020-11-10_22-15-14.gif

    1.3 实现思路

    给报表添加「加载结束」JS 事件实现滚屏和跑马灯的效果。

    跑马灯的详细接口介绍可参见:跑马灯接口

    决策报表实现跑马灯效果请参考:JS实现决策报表中滚屏/跑马灯效果

    2. 示例一

    2.1 准备模板

    1)新建普通报表,新建数据集ds1,SQL 语句为 SELECT * FROM 销量 

    2)设计报表样式,如下图所示:

    image.png

    2.2 冻结标题行

    点击「模板>重复与冻结设置」,设置重复和冻结标题行,如下图所示:

    2020-11-10_22-44-23.png

    2.3 添加 JS 事件

    点击「模板>模板 Web 属性>分页预览设置」,选择「为该模板单独设置」,添加一个「加载结束」事件,如下图所示:

    10.png

    JavaScript 代码如下:

    _g().startMarquee();

    2.4 效果预览

    2.4.1 PC 端

    保存模板,点击「分页预览」,此时跑马灯效果为:间隔时长默认为 0.1 s,每次滚动的距离为 5 px,鼠标悬停时暂停。效果如 1.1 节所示。

    2.4.2 移动端

    不支持移动端。

    3. 示例拓展

    不同的应用场景,需要不同的滚动效果,只需要在「加载结束」事件中修改相应的 JS 代码即可。

    注:JS 代码非固定,可根据使用场景选择和修改代码。

    3.1 无标题行滚动

    报表不设置标题行冻结,直接滚屏显示,效果如下图所示:

    2020-11-10_23-10-18.gif

    JavaScript 代码如下:

    _g().startMarquee();

    3.2 无标题行鼠标悬停不停止滚动

    报表滚动时,鼠标点击,可以停止滚动,效果如下图所示:

    2020-11-10_23-28-11.gif

    JavaScript 代码如下:

    _g().startMarquee({                
    stopOnHover:false    
    });

    3.3 无标题行每 0.3s 滚动 2 px,鼠标悬停暂停

    报表滚动时,鼠标悬浮报表,滚动会停止;鼠标移开,再次滚动。效果如下图所示:

    2020-11-10_23-41-09.gif

    JavaScript 代码如下:

    _g().startMarquee({        
    offset: 2,        
    interval: 0.3,        
    stopOnHover:true    
    });

    4. 模板下载

    已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现滚屏或跑马灯.cpt

    点击下载模板:JS实现滚屏或跑马灯.cpt

    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持