實現報表滾動到底部翻頁效果
報表資料分多頁在頁面中顯示,為了使用者翻看資料方便,報表頁面都會有按鈕,方便使用者點選按鈕檢視其他頁的資料,按鈕的翻頁方式比較常見,潤乾報表展現頁面提供的就是這種方式。
這裡介紹另一種翻頁方式,滑鼠滾動來翻頁檢視資料。
基本實現思路就是在報表展現頁面中加滑鼠滾動事件,滾到底就呼叫潤乾自帶的函式。
在報表展現的頁面 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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何實現報表滾動到底部進行翻頁的效果
- 報表中怎樣實現滾動的公告效果
- 頁面沒有出現滾動條時底部懸浮顯示到最底部
- 使用UICollectionView實現首頁的滾動效果UIView
- 滑鼠雙擊頁面實現自動滾動效果
- H5頁面滾動阻尼效果實現H5
- css實現新聞公告上下翻滾效果CSS
- 前端實現文字滾動效果前端
- css3實現的方塊迴圈翻滾跳動效果CSSS3
- 類似微信首頁彈性滾動和慣性滾動效果的實現——OverScroll
- 部落格園裝飾——(二)滾動到頁面頂部或底部
- 直播軟體原始碼,實現頁面滾動到可視區顯示動畫效果原始碼動畫
- 監聽滾動,上下翻頁
- css實現視差滾動效果CSS
- One Page Scroll – 實現蘋果風格的單頁滾動效果蘋果
- 如何判斷滾動是否滾動到了網頁底部或者頂部網頁
- 禁止蒙層底部頁面跟隨滾動
- 元素滾動到指定位置以後可以實現固定效果
- Flutter實戰動畫番外篇-翻頁效果實現Flutter動畫
- 十行程式碼實現網頁標題滾動效果!行程網頁
- FullPage.js – 輕鬆實現全屏滾動(單頁網站)效果JS網站
- 巢狀滾動效果實現討論巢狀
- Delphi中TFlowPanel實現滾動條效果
- anime.js 網頁動畫庫,輕鬆實現網頁數字滾動效果JS網頁動畫
- css3實現滑鼠懸浮背景上下翻滾效果CSSS3
- 用AutoLayout實現分頁滾動
- js頁面全屏垂直滾動效果JS
- [Parallax Animation]實現知乎 Android 客戶端啟動頁視差滾動效果Android客戶端
- scrollable滾動條向下滾動至底部
- 關於用jquery.masonry.js實現動態載入效果(當頁面滾動條拉到底部時時重新載入圖片)jQueryJS
- 使用純 CSS 實現滾動陰影效果CSS
- js實現的模擬滾動條效果JS
- 影像平滑滾動效果的VC實現 (轉)
- 線上直播系統原始碼,實現翻頁載入、下拉滾動載入原始碼
- CSS3實現的div塊上下左右翻滾效果CSSS3
- Ext實現滾動條一直處於底部的方法
- 三種方式實現平滑滾動頁面到頂部的功能
- angular 監聽 Windows 滾動事件 實現頁面滾動載入AngularWindows事件