實現報表滾動到底部翻頁效果

bubblegum發表於2020-07-30

報表資料分多頁在頁面中顯示,為了使用者翻看資料方便,報表頁面都會有按鈕,方便使用者點選按鈕檢視其他頁的資料,按鈕的翻頁方式比較常見,潤乾報表展現頁面提供的就是這種方式。

TIM20200505120754png

這裡介紹另一種翻頁方式,滑鼠滾動來翻頁檢視資料。
基本實現思路就是在報表展現頁面中加滑鼠滾動事件,滾到底就呼叫潤乾自帶的函式。
在報表展現的頁面 showReport.jsp 中新增下面的 JS:

if (window.addEventListener)//FF,火狐瀏覽器會識別該方法
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;//W3C
//統一處理滾輪滾動事件
function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {//IE、chrome瀏覽器使用的是wheelDelta,並且值為“正負120”
        delta = event.wheelDelta/120; 
        if (window.opera) delta = -delta;//因為IE、chrome等向下滾動是負值,FF是正值,為了處理一致性,在此取反處理
    } else if (event.detail) {//FF瀏覽器使用的是detail,其值為“正負3”
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
}
//上下滾動時的具體處理函式
function handle(delta) {
if (delta <0){//向下滾動
      nextPage('report1');  
    }else{//向上滾動
       prevPage('report1'); 
    }
}if (window.addEventListener)//FF,火狐瀏覽器會識別該方法
    window.addEventListener('DOMMouseScroll', wheel, false);window.onmousewheel = document.onmousewheel = wheel;//W3C//統一處理滾輪滾動事件function wheel(event){    var delta = 0;    if (!event) event = window.event;    if (event.wheelDelta) {//IE、chrome瀏覽器使用的是wheelDelta,並且值為“正負120”
        delta = event.wheelDelta/120; 
        if (window.opera) delta = -delta;//因為IE、chrome等向下滾動是負值,FF是正值,為了處理一致性,在此取反處理
    } else if (event.detail) {//FF瀏覽器使用的是detail,其值為“正負3”
        delta = -event.detail/3;
    }    if (delta)
        handle(delta);
}//上下滾動時的具體處理函式function handle(delta) {if (delta <0){//向下滾動
      nextPage('report1');  
    }else{//向上滾動
       prevPage('report1'); 
    }
}

報表屬性中設定報表分頁方式為按行分頁,每頁顯示 30 行的報表,在頁面上的分頁及拖動滑鼠分頁的效果如下。

TIM20200505121728png

頁面新增上面的 JS 後,就可以在瀏覽器中使用 showReport.jsp 訪問報表,上下滾動滑鼠滑輪,就可以暢爽的翻頁檢視資料了。

gif


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69957599/viewspace-2708102/,如需轉載,請註明出處,否則將追究法律責任。

相關文章