报表块实现跑马灯效果

编辑
  • 文档创建者:axing
  • 浏览次数:18541次
  • 编辑次数:12次
  • 最近更新:Carly 于 2019-08-14
  • 1. 版本

    报表服务器版本
    10.0

    2. 概述

    2.1 问题描述

    在设计大屏报表块的时候,有时我们希望实现文字跑马灯效果。现有的文档当中:

    1)以html实现跑马灯特效

    2)JS实现跑马灯效果

    都是以「HTML+JS」的方式实现了单行文本的跑马灯效果,那么如何实现整体报表块的跑马灯效果呢?如下图所示:

    2.2 解决思路

    报表布局设置加上 JS 控制实现。

    注:示例是在报表块初始化后通过 JS 实现了隐藏滚动条和跑马灯的效果,如果报表块加载比较慢没有实现效果,可以适当调整延时函数 setTimeout 的延时时间。

    3. 示例一:无自定义滚动条插件,不冻结标题行

    3.1 实现背景

    1)该方案不得安装自定义滚动条插件 ,如需使用请查看示例二

    2)该方案不得冻结标题行,如需冻结请查看示例三

    3)该方案 body 布局方式必须为绝对布局,自适应布局下不生效

    4)该方案可实现:单个报表块跑马灯,多个报表块同时跑马灯

    3.2 实现步骤

    1)打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-素材.frm

    点击下载:03-报表块实现跑马灯效果-素材.frm

    report0 为例:

    image.png

    2)添加初始化事件

    image.png

    JS 代码如下:

    注:用户使用时需要把代码中所有的REPORT0,修改为报表块对应的控件名称的大写格式

    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');
    }, 100);

    window.flag = true;
    setTimeout(function() {
       $(".reportContent").mouseover(function() {
           window.flag = false;
       })
       $(".reportContent").mouseleave(function() {
           window.flag = true;
       })
       var old = -1;
       window.interval2 = setInterval(function() {
           if (window.flag) {
               currentpos = $("div[widgetname=REPORT0]").find(".reportContent")[0].scrollTop;
               if (currentpos == old) {
                   $("div[widgetname=REPORT0]").find(".reportContent")[0].scrollTop = 0;
               } else {
                   old = currentpos;
                   $("div[widgetname=REPORT0]").find(".reportContent")[0].scrollTop = currentpos + 1.5;
               }
           }
       }, 25);
    }, 1000)

    3.3 保存预览

    注:不支持移动端。

    4. 示例二:有自定义滚动条插件,不冻结标题行

    4.1 实现背景

    1)该方案在安装自定义滚动条插件的前提下进行

    2)该方案不得冻结标题行,如需冻结请查看示例三

    3)该方案 body 布局方式必须为绝对布局,自适应布局下不生效

    4)该方案可实现:单个报表块跑马灯,多个报表块同时跑马灯

    4.2 实现步骤

    1)安装 自定义滚动条插件

    2)打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-素材.frm

    点击下载:03-报表块实现跑马灯效果-素材.frm

    report1 为例:

    图片.png

    3)添加初始化事件

    图片.png

    JS 代码如下:

    注:用户使用时需要把代码中所有的REPORT1,修改为报表块对应的控件名称的大写格式

    setTimeout(function() {
       $("div[widgetname=REPORT1]").find(".scrollDiv").css('overflow-x', 'hidden');
       $("div[widgetname=REPORT1]").find(".scrollDiv").css('overflow-y', 'hidden');
    }, 100);

    window.flag = true;
    setTimeout(function() {
       $(".scrollDiv").mouseover(function() {
           window.flag = false;
       })
       $(".scrollDiv").mouseleave(function() {
           window.flag = true;
       })
       var old = -1;
       window.interval2 = setInterval(function() {
           if (window.flag) {
               currentpos = $("div[widgetname=REPORT1]").find(".scrollDiv")[0].scrollTop;
               if (currentpos == old) {
                   $("div[widgetname=REPORT1]").find(".scrollDiv")[0].scrollTop = 0;
               } else {
                   old = currentpos;
                   $("div[widgetname=REPORT1]").find(".scrollDiv")[0].scrollTop = currentpos + 1.5;
               }
           }
       }, 25);
    }, 1000)

    4.3 保存预览

    注:不支持移动端。


    5. 示例三:冻结标题行

    5.1 实现背景

    1)该方案适用于标题行冻结的报表块

    2)该方案 body 布局方式必须为绝对布局,自适应布局下不生效

    3)该方案可实现:单个报表块跑马灯,多个报表块同时跑马灯

    5.2 实现步骤

    1)打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-素材.frm

    点击下载:03-报表块实现跑马灯效果-素材.frm

    report2 为例:

    图片.png

    2)添加初始化事件

    图片.png


    JS 代码如下:

    注:用户使用时需要把代码中所有的REPORT2,修改为报表块对应的控件名称的大写格式

    setTimeout(function() {
    $("div[widgetname=REPORT2]").find("#frozen-center").css('overflow-x', 'hidden');
    $("div[widgetname=REPORT2]").find("#frozen-center").css('overflow-y', 'hidden');
    $("div[widgetname=REPORT2]").find("#frozen-north").css('overflow-x', 'hidden');
    $("div[widgetname=REPORT2]").find("#frozen-north").css('overflow-y', 'hidden');
    $("div[widgetname=REPORT2]").find(".reportContent").css('overflow-y', 'hidden');
    $("div[widgetname=REPORT2]").find(".reportContent").css('overflow-x', 'hidden');
    }, 100);
    window.flag = true;
    setTimeout(function() {
    $("#frozen-center").mouseover(function() {
    window.flag = false;
    })
    //鼠标悬停,滚动停止
    $("#frozen-center").mouseleave(function() {
    window.flag = true;
    })
    //鼠标离开,继续滚动
    var old = -1;
    var interval = setInterval(function() {
    if (window.flag) {
    currentpos = $("div[widgetname=REPORT2]").find("#frozen-center")[0].scrollTop;
    if (currentpos == old) {
    $("div[widgetname=REPORT2]").find("#frozen-center")[0].scrollTop = 0;
    } else {
    old = currentpos;
    $("div[widgetname=REPORT2]").find("#frozen-center")[0].scrollTop = currentpos + 1.5;
    }
    }
    }, 25);
    //以25ms的速度每次滚动3.5PX
    }, 1000)

    5.3 保存预览

    • 单个报表块跑马灯

    222

    注:不支持移动端。

    6. 已完成模板

    已完成的模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-示例.frm

    点击下载模板:03-报表块实现跑马灯效果-示例.frm

    注:未安装自定义滚动条插件时,report0 和 report2 实现跑马灯效果

           安装了自定义滚动条插件时,report1 和 report2 实现跑马灯效果


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]