反馈已提交

网络繁忙

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

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

    1.1 版本

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

    1.2 预期效果

    普通报表可以参考 JS实现自动滚屏/跑马灯效果 实现跑马灯效果,决策报表中报表块同样希望实现跑马灯效果,如下图所示:

    222

    1.3 实现思路

    通过给报表块添加「初始化后」 JS 事件实现隐藏滚动条的跑马灯的效果。

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

    1.4 注意事项

    1)不支持移动端。

    2)不支持报表块定时刷新场景。

    3)安装 自定义滚动条 插件后,当鼠标移入滚动播放的所在位置后将优先展示插件效果。

    2. 示例

    2.1 数据准备

    新建决策报表,新建数据集 ds1 ,SQL 语句为:SELECT * FROM 销量,如下图所示:

    1589965979355334.png

    2.2 报表设计

    1)将报表块 report0 拖入到 body 组件中,如下图设计报表块的表格。

    image.png

    2)选中报表块 report0 ,点击「编辑」,冻结第 1 行,如下图所示:

    2020-11-19_14-29-39.png

    2.3 添加事件

    选中报表块 report0 ,添加初始化事件,如下图所示:

    JavaScript 代码如下:

    setTimeout(function(){
         _g().getWidgetByName('report0').startMarquee()
    }, 500);

    注1:如果报表块加载比较慢没有实现效果,可以适当调整延时函数 setTimeout( ) 的延时时间。

    注2:setTimeout( ) 函数的单位为毫秒,跑马灯接口单位为秒,需要注意区分。

    2.4 效果预览

    保存报表,点击「PC端预览」,跑马灯效果如下图所示:

    1F70774B-64F0-4766-BB58-4C1B74B14564.GIF

    3. 示例扩展

    3.1 显示隐藏报表块并自动加载跑马灯效果

    新增一种报表块跑马灯应用场景和设置方法:报表前端展示时,报表块处于隐藏不显示的状态,点击按钮后,报表块可以显示并自动加载跑马灯效果。如下图所示:

    1A6F468C-EFAF-4542-A440-44EFBC997F59.GIF

    3.1.1 报表设计

    1)将报表块 report0 和按钮控件 button0_c 拖入到 body 组件中,如下图设计报表块的表格,报表块不勾选控件「可见」,隐藏报表块。

    Snag_5502dcf.png

    2)选中报表块组件,点击编辑,冻结第 1 行,如下图所示:

    Snag_1de4ce2.png

    3.1.2 添加事件

    1)选中报表块组件,给报表块添加一个初始化事件,实现跑马灯效果,如下图所示:

    Snag_55193c8.png

    JavaScript  代码如下:

    setTimeout(function() {
          //隐藏报表块report0的滚动条(此报表块名为report0,根据具体情况修改)
       $("div[widgetname=REPORT0]").find(".frozen-north").css({
           'overflow-x':'hidden',
           'overflow-y':'hidden'
       });
       $("div[widgetname=REPORT0]").find(".frozen-center").css({
           'overflow-x':'hidden',
           'overflow-y':'hidden'
       });
       _g().getWidgetByName('report0').startMarquee()
    },1000);

    2)选中按钮组件,给按钮添加一个点击事件,点击之后可以显示被隐藏的报表块,如下图所示:

    Snag_557049a.png

    JavaScript 代码如下:

    this.options.form.getWidgetByName('REPORT0').setVisible(true)

    3.1.3 效果预览

    保存报表,点击「PC端预览」,效果如下图所示:

    1A6F468C-EFAF-4542-A440-44EFBC997F59.GIF

    3.2 点击按钮取消跑马灯效果

    3.2.1 报表设计

    在 3.1 示例的基础上新增按钮控件 button0_a ,控件名称为「关闭跑马灯」,如下图所示:

    3.2.2 添加 JS 代码

    选中新增的按钮组件,给按钮添加一个点击事件,点击之后可以关闭报表块的跑马灯效果,如下图所示:

    8.png

    JavaScript 代码如下:

    _g().getWidgetByName('report0').stopMarquee();

    3.2.3 效果预览

    c

    动画1.gif

    3.3 多报表块滚动

    3.3.1 报表设计

    在第二节示例的基础上,希望实现多报表块滚动,只需要在 body 内增加对应的报表块数量,并分别对报表块添加事件即可,如下图所示:

    2022-09-14_16-45-22.png

    仅需要将 2.3 节的 JavaScript 代码中报表块名词更换为对应的报表块名称即可。

    3.3.2 效果预览

    保存报表,点击「PC端预览」,效果如下图所示:

    2022-09-14_16-54-39.gif

    4. 已完成模板

    已完成的模板请参见:

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果.frm

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\报表块跑马灯扩展应用.frm

    点击下载模板:

    03-报表块实现跑马灯效果.frm

    报表块跑马灯扩展应用.frm

    附件列表


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

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

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

    不再提示

    10s后关闭

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