报表块实现跑马灯效果

  • 文档创建者:axing
  • 编辑次数:27次
  • 最近更新:Leo.Tsai 于 2020-09-21
  • 1. 概述

    1.1 问题描述

    决策报表中报表块如何实现下图所示的跑马灯效果呢?

    222

    1.2 实现思路

    通过初始化 JS 事件实现隐藏滚动条和跑马灯的效果。

    注:目前该方法只支持 Chrome 内核的浏览器。

    2. 示例

    2.1 数据准备

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

    1589965979355334.png

    2.2 报表设计

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

    Snag_1d9b430.png

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

    Snag_1de4ce2.png

    2.3 添加事件

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

    Snag_1e15ca3.png

    JavaScript 代码如下:

    setTimeout(function() {
        //每次重新查询加载的时候需要清掉上一次设置的定时器
        $("div[widgetname=REPORT0]").find("#frozen-center").css('overflow-x', 'hidden');
        $("div[widgetname=REPORT0]").find("#frozen-center").css('overflow-y', 'hidden');
        $("div[widgetname=REPORT0]").find("#frozen-north").css('overflow-x', 'hidden');
        $("div[widgetname=REPORT0]").find("#frozen-north").css('overflow-y', 'hidden');
        $("div[widgetname=REPORT0]").find(".reportContent").css('overflow-y', 'hidden');
        $("div[widgetname=REPORT0]").find(".reportContent").css('overflow-x', 'hidden');
        //隐藏报表块report0_c的滚动条(此报表块名为report0_c,根据具体情况修改)
        $("div[widgetname=REPORT0_C]").find(".frozen-north")[0].style.overflow = "hidden";
        $("div[widgetname=REPORT0_C]").find(".frozen-center")[0].style.overflow = "hidden";
    },
    100);

    window.flag2 = true;
    //鼠标悬停,滚动停止  
    setTimeout(function() {
        $("div[widgetname=REPORT0_C]").find(".frozen-center").mouseover(function() {
            window.flag2 = false;
        });

        //鼠标离开,继续滚动  
        $("div[widgetname=REPORT0_C]").find(".frozen-center").mouseleave(function() {
            window.flag2 = true;
        });

        var old = -1;
        var interval = setInterval(function() {
            if (window.flag2) {
                currentpos2 = $("div[widgetname=REPORT0_C]").find(".frozen-center")[0].scrollTop;
                if (currentpos2 == old) {
                    $("div[widgetname=REPORT0_C]").find(".frozen-center")[0].scrollTop = 0;
                } else {
                    old = currentpos2;
                    //以25ms的速度每次滚动1.5PX  
                    $("div[widgetname=REPORT0_C]").find(".frozen-center")[0].scrollTop = currentpos2 + 1.5;
                }
            }
        },
        25);
    },
    1000);

    注:不设置冻结的表格滚动需要将 frozen-center 换成 reportContent。

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

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

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

    find(".frozen-center")

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

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

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

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

    var flag = window.flag0

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

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

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

    2.4 效果预览

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

    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")[0].style.overflow = "hidden";
        $("div[widgetname=REPORT0]").find(".frozen-center")[0].style.overflow = "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) {
                    $("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 效果预览

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

    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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!