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

  • 文档创建者:axing
  • 编辑次数:34次
  • 最近更新:RosieY 于 2021-02-25
  • 1. 概述

    1.1 问题描述

    普通报表可以参考 JS实现自动滚屏/跑马灯效果 实现跑马灯效果,决策报表中报表块如何实现下图所示的跑马灯效果呢?

    222

    1.2 实现思路

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

    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,添加初始化事件,如下图所示:

    2020-11-19_14-32-18.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'
        });
     
    },1000);
     
    window.flag1 = true;
    var self1 = this;
    //鼠标悬停,滚动停止
    setTimeout(function() {
        $("div[widgetname=REPORT0]").find(".frozen-center").mouseover(function() {
            window.flag1 = false;
        });
     
        //鼠标离开,继续滚动
        $("div[widgetname=REPORT0]").find(".frozen-center").mouseleave(function() {
            window.flag1 = true;
        });
     
        var old = -1;
        var interval = setInterval(function() {
            if (!self1.isVisible()) {
                return;
            }
            if (window.flag1) {
                currentpos1 = $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop;
                if (currentpos1 == old && 0!=currentpos1) {
                    $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = 0;
                } else {
                    old = currentpos1;
                    //以25ms的速度每次滚动1.5PX
                    $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = currentpos1 + 1.5;
                }
            }
        },
        25);
    },
    1000);

    实际应用时,用户需要自行修改以下几处:

    修改点注释
    $("div[widgetname=REPORT0]")

    用户需要根据报表块的名称修改 REPORT0,报表块的名称需要大写

    find(".frozen-center")

    根据实际情况修改滚动块元素名称 :

    .frozen-center:报表块中存在冻结

    .reportContent:报表块中无冻结且未安装自定义滚动条插件

    .scrollDiv:报表块中无冻结且安装了自定义滚动条插件

    var flag = window.flag0

    模板中存在多个跑马灯报表块时,依次设置为 flag0,flag1,flag2 等

    需保证全局变量各不相同,否则无法实现单个暂停

    25);滚动速度,用户可以根据实际情况修改

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

    2.4 效果预览

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

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

    注1:不支持移动端。

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

    注3:如果不安装 自定义滚动条 插件,鼠标移入后不跟随鼠标滚轮移动。

    3. 扩展应用

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

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

    3.1 数据准备

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

    1589965979355334.png

    3.2 报表设计

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

    Snag_5502dcf.png

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

    Snag_1de4ce2.png

    3.3 添加事件

    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'
        });
     
    },1000);
     
    window.flag1 = true;
    var self1 = this;
    //鼠标悬停,滚动停止
    setTimeout(function() {
        $("div[widgetname=REPORT0]").find(".frozen-center").mouseover(function() {
            window.flag1 = false;
        });
     
        //鼠标离开,继续滚动
        $("div[widgetname=REPORT0]").find(".frozen-center").mouseleave(function() {
            window.flag1 = true;
        });
     
        var old = -1;
        var interval = setInterval(function() {
            if (!self1.isVisible()) {
                return;
            }
            if (window.flag1) {
                currentpos1 = $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop;
                if (currentpos1 == old && 0!=currentpos1) {
                    $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = 0;
                } else {
                    old = currentpos1;
                    //以25ms的速度每次滚动1.5PX
                    $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = currentpos1 + 1.5;
                }
            }
        },
        25);
    },
    1000);

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

    Snag_557049a.png

    JavaScript 代码如下:

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

    3.4 效果预览

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

    1A6F468C-EFAF-4542-A440-44EFBC997F59.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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-127-81526