报表数据滚动问题

我给报表块设置了初始化事件,使数据能够滚动:

setTimeout(function(){
	var wid=($("div[widgetname='REPORT0']").width()-17)+'px'; //获取报表块宽度
	$("div[widgetname='REPORT0']").css('width',wid); //重置报表块宽度
	var height=($("div[widgetname='REPORT0']").height()-17)+'px'; //获取报表块高度
	$("div[widgetname='REPORT0']").css('height',height); //重置报表块高度
},0);

  
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=REPORT0]").find(".frozen-center")[0].scrollTop;  
            if(currentpos == old) {  
                $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = 0;  
            } else {  
                old = currentpos;  
                //以25ms的速度每次滚动1.5PX    
                $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = currentpos + 1.5;  
            }  
        }  
    }, 50);  
}, 1000);

在数据数量不足时,无法滚动(是正常的),但是当增加数据后,报表数据虽然增加了,但是却不能自动滚动,得用鼠标去划一下才行,可是这是看板,到时候肯定是无法操作的,请问各位大佬有什么办法吗?

image.png

image.png

FineReport 故事的小黄瓜 发布于 2019-5-18 18:55 (编辑于 2019-5-18 19:30)
1min目标场景问卷 立即参与
回答问题
悬赏:4 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共3回答
最佳回答
5
L大大Lv7高级互助
发布于2020-7-10 17:02

可对应修改为如下代码

setTimeout(function() {

    var $report = $("div[widgetname=REPORT0]");

    //获取对应report的div元素

    var $scroll = $report.find(".reportContent");

    //获取对应report的div元素的滚动块元素,冻结为#frozen-center,未冻结且未安装自定义滚动条插件为.reportContent,未冻结且安装了自定义滚动条插件为.scrollDiv

    var flag = window.flag0;

    //设置全局变量flag,每个报表块需保证各不相同

    $report.find("#frozen-center").css('overflow-x', 'hidden');

    $report.find("#frozen-center").css('overflow-y', 'hidden');

    $report.find("#frozen-north").css('overflow-x', 'hidden');

    $report.find("#frozen-north").css('overflow-y', 'hidden');

    //冻结情况下隐藏滚动条

    $report.find(".reportContent").css('overflow-y', 'hidden');

    $report.find(".reportContent").css('overflow-x', 'hidden');

    //非冻结情况下隐藏滚动条

    flag = true;

    //定义全局参数flag,用来控制滚动的暂停和继续 (表单flag注意重复)

    $scroll.mouseover(function() {

        flag = false;

    })

    //鼠标悬浮,滚动停止

    $scroll.mouseleave(function() {

        flag = true;

    })

    //鼠标离开,继续滚动

    var old = -1;

    setInterval(function() {

        if (flag) {

            currentpos = $scroll[0].scrollTop;

            //获取距顶部距离

            if (currentpos == old) {

                $scroll[0].scrollTop = 0;

                //若已到达底部,则重置

            } else {

                old = currentpos;

                $scroll[0].scrollTop = currentpos + 1.5;

                //若未到达底部,则向下移动1.5像素

            }

        }

    }, 25);

    //以25ms的频率执行

}, 500);


最佳回答
0
Doctor_WeiLv7中级互助
发布于2019-5-19 10:01

直接装跑马灯插件

最佳回答
0
firegunzxLv6高级互助
发布于2019-5-20 09:19
setTimeout(function(){  
    $("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden";  
    $("div[widgetname=REPORT0]").find("#frozen-center")[0].style.overflow="hidden";  
    },100);  
window.flag=true;  
setTimeout(function(){     
$("div[widgetname=REPORT0]").find("#frozen-center").mouseover(function()    
{    
  window.flag=false;    
  })   
$("div[widgetname=REPORT0]").find("#frozen-center").mouseleave(function()    
{    
  window.flag=true;
  })    
var old1=-1;     
var interval1=setInterval(function()    
{  
if(window.flag){  
   currentpos1=$("div[widgetname=REPORT0]").find("#frozen-center")[0].scrollTop;    
   if (currentpos1==old1){  
    $("div[widgetname=REPORT0]").find("#frozen-center")[0].scrollTop=0;  
     }    
   else {    
      old1=currentpos1;    
      $("div[widgetname=REPORT0]").find("#frozen-center")[0].scrollTop=currentpos1+1.5;    
        }    
      }  
    },100);  
},1000)

试试这个

  • 4关注人数
  • 451浏览人数
  • 最后回答于:2020-7-10 17:02
    请选择关闭问题的原因
    确定 取消
    返回顶部