FR決策表單JS實現自動滾屏/滾動效果
阿新 • • 發佈:2019-01-03
選中決策報表中的報表塊report0,點選工具欄上的凍結,彈出重複與凍結設定對話方塊,勾選並設定重複標題行從第1行至第2,勾選凍結第1行至第2行,
選中報表塊report0,新增初始化後事件,程式碼如下:
if(window.interval2){clearInterval(window.interval2);} setTimeout(function(){ $("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden"; $("div[widgetname=REPORT0]").find("#frozen-center")[0].style.overflow="hidden"; },100); //隱藏報表塊report0的滾動條 window.flag=true; setTimeout(function(){ $("#frozen-center").mouseover(function() { window.flag=false; }) //滑鼠懸停,滾動停止 $("#frozen-center").mouseleave(function() { window.flag=true; }) //滑鼠離開,繼續滾動 var old=-1; window.interval2=setInterval(function() { if(window.flag){ currentpos=$("#frozen-center")[0].scrollTop; if (currentpos==old){ $("#frozen-center")[0].scrollTop=0; } else { old=currentpos; $("#frozen-center")[0].scrollTop=currentpos+1.5; } } },25); //以25ms的速度每次滾動3.5PX },1000)
js主要實現的功能是:決策報表塊在凍結標題行後實現迴圈滾動,滑鼠懸停暫停和滑鼠離開繼續滾動的效果(隱藏了滾動條)。懸停事件為mouseover,離開事件為
mouseleave。
注:div[widgetname=REPORT0]")裡需根據報表塊名稱修改,這裡是report0;
注:如果想實現多報表塊同時滾動,則將$("#frozen-center")替換為$(".frozen-center"),[0]表示報表塊的位置,如果不是第一個需要換成對應的位置。
js程式碼如下:
if(window.interval2){clearInterval(window.interval2);} setTimeout(function(){ $("div[widgetname=REPORT0]").find(".frozen-north")[0].style.overflow="hidden"; $("div[widgetname=REPORT0]").find(".frozen-center")[0].style.overflow="hidden"; },100); //隱藏報表塊report0的滾動條 window.flag=true; setTimeout(function(){ $(".frozen-center").mouseover(function() { window.flag=false; }) //滑鼠懸停,滾動停止 $(".frozen-center").mouseleave(function() { window.flag=true; }) //滑鼠離開,繼續滾動 var old=-1; window.interval2=setInterval(function() { if(window.flag){ currentpos=$(".frozen-center")[0].scrollTop; if (currentpos==old){ $(".frozen-center")[0].scrollTop=0; } else { old=currentpos; $(".frozen-center")[0].scrollTop=currentpos+1.5; } } },25); //以25ms的速度每次滾動3.5PX },1000)
如未設定凍結標題行,則將$("#frozen-center")替換為$(".reportContent"),安裝了自定義滾動條外掛(1.2版本)情況下可以將$("#frozen-center")替換成$(".scrollDiv")。
js程式碼如下:
if(window.interval2){clearInterval(window.interval2);} setTimeout(function(){ //$("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden"; $("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow="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=$(".reportContent")[0].scrollTop; if (currentpos==old){ $(".reportContent")[0].scrollTop=0; } else { old=currentpos; $(".reportContent")[0].scrollTop=currentpos+1.5; } } },25); },1000)