zoukankan      html  css  js  c++  java
  • 实现报表滚动到底部翻页效果

    报表数据分多页在页面中显示,为了用户翻看数据方便,报表页面都会有按钮,方便用户点击按钮查看其他页的数据,按钮的翻页方式比较常见,润乾报表展现页面提供的就是这种方式。

    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'); } } 

    报表属性中设置报表分页方式为按行分页,每页显示 30 行的报表,在页面上的分页及拖动鼠标分页的效果如下。

    TIM20200505121728png

    页面添加上面的 JS 后,就可以在浏览器中使用 showReport.jsp 访问报表,上下滚动鼠标滑轮,就可以畅爽的翻页查看数据了。

    gif

  • 相关阅读:
    Redis数据模型
    Redis集群使用的一些命令(持续更新)
    Redis简单集群搭建
    观察者模式
    抽象工厂模式
    简单工厂模式及其简单Java案例代码实现
    工厂方法模式及简单Java案例代码实现
    Java中的双重检查锁(double checked locking)
    BayaiM__MYSQL千万级数据量的优化方法积累__初级菜鸟
    BayaiM__Linux安装MySQL的两种方法
  • 原文地址:https://www.cnblogs.com/shiGuangShiYi/p/13411174.html
Copyright © 2011-2022 走看看