反馈已提交

网络繁忙

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

  • 文档创建者:axing
  • 编辑次数:38次
  • 最近更新:RosieY 于 2021-07-28
  • 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);

    如果要实现从上到下滚动到底后再从下到上滚动,可以参考代码:

    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'
        });
     
    },2000);
     
    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 isDown1 = true;
        var camera= $("div[widgetname=REPORT0]").find(".frozen-center")[0];
        var interval = setInterval(function() {
            if (!self1.isVisible()) {
                return;
            }

            if (window.flag1) {
                  if (isDown1) {
                    camera.scrollTop++; //下降
                    //如果滚动条超过100的话,就往上
                    //可以修改这个条件,作为折返的前提
                    if (camera.scrollTop+camera.clientHeight > camera.scrollHeight-1) {
                        isDown1 = false;
                    }
                } else {
                     camera.scrollTop--; //上升
                    //到达顶部的话,就下降
                    if (camera.scrollTop == 0) {
                        isDown1 = true;
                    }
                }
            }
        },
        25);//移动的速度
    },
    2000);

    代码支持 IE、谷歌、火狐浏览器,若出现不支持情况,可根据浏览器版本适配内容更改。实际应用时,用户需要自行修改以下几处:

    修改点注释
    $("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  代码如下:

    注:代码支持 IE、谷歌、火狐浏览器,若出现不支持情况,可根据浏览器版本适配内容更改。实际应用时,用户可根据实际情况调整代码,具体可参考 2.3 节。

    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-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭