實現報表滾動到底部翻頁效果
報表資料分多頁在頁面中顯示,為了使用者翻看資料方便,報表頁面都會有按鈕,方便使用者點選按鈕檢視其他頁的資料,按鈕的翻頁方式比較常見,潤乾報表展現頁面提供的就是這種方式。
這裡介紹另一種翻頁方式,滑鼠滾動來翻頁檢視資料。
基本實現思路就是在報表展現頁面中加滑鼠滾動事件,滾到底就呼叫潤乾自帶的函式。
在報表展現的頁面 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 行的報表,在頁面上的分頁及拖動滑鼠分頁的效果如下。
頁面新增上面的 JS 後,就可以在瀏覽器中使用 showReport.jsp 訪問報表,上下滾動滑鼠滑輪,就可以暢爽的翻頁檢視資料了。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69957599/viewspace-2708102/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何實現報表滾動到底部進行翻頁的效果
- 報表中怎樣實現滾動的公告效果
- 頁面沒有出現滾動條時底部懸浮顯示到最底部
- H5頁面滾動阻尼效果實現H5
- Flutter實戰動畫番外篇-翻頁效果實現Flutter動畫
- 前端實現文字滾動效果前端
- 直播軟體原始碼,實現頁面滾動到可視區顯示動畫效果原始碼動畫
- 部落格園裝飾——(二)滾動到頁面頂部或底部
- 監聽滾動,上下翻頁
- 類似微信首頁彈性滾動和慣性滾動效果的實現——OverScroll
- anime.js 網頁動畫庫,輕鬆實現網頁數字滾動效果JS網頁動畫
- 十行程式碼實現網頁標題滾動效果!行程網頁
- 從頁面底部回到頂部+動畫效果 & 翻頁後從按鈕處回到頁面頂部動畫
- 巢狀滾動效果實現討論巢狀
- 用AutoLayout實現分頁滾動
- 使用純 CSS 實現滾動陰影效果CSS
- 什麼是視差滾動?如何實現視差滾動的效果?
- OneClock的翻頁時鐘效果是如何實現的
- 三種方式實現平滑滾動頁面到頂部的功能
- 線上直播系統原始碼,實現翻頁載入、下拉滾動載入原始碼
- JavaFx 實現水平滾動文字(跑馬燈效果)Java
- angular 監聽 Windows 滾動事件 實現頁面滾動載入AngularWindows事件
- ul>li*3 實現翻書動畫效果動畫
- 報表展現時如何實現固定表頭效果
- OverScroll彈性滾動和慣性滾動效果的實現原理——CoordinatorLayout+Behavior
- Flutter 實現底部擴散模糊動畫(二)頁面互動Flutter動畫
- unity 實現輪盤方式的按鈕滾動效果Unity
- 直播軟體搭建,Android實現文字滾動播放效果Android
- Web 頁面如何實現動畫效果Web動畫
- 一個div滾動到底部
- 大屏報表元件間的聯動互動效果實現方法元件
- 如何實現頁面重新整理後不定位到之前的滾動位置?
- 報表如何實現行列互換效果?
- Android 翻頁效果加蘋果桌面應用抖動效果Android蘋果
- [javascript]如何優雅的實現網頁自動滾動JavaScript網頁
- js、jQuery實現文字上下無縫輪播、滾動效果JSjQuery
- 隱藏滾動條保留滾動效果
- Android 實現GridView的橫向滾動,實現仿京東秒殺效果AndroidView