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

  • 相关阅读:
    微信成为开发者C#代码
    Ajax.ActionLink()方法的使用
    Entity FrameWork初始化数据库的四种策略
    最长公共子序列
    表达式求值
    韩信点兵
    蛇形填数
    5个数求最值
    求转置矩阵问题
    素数求和问题
  • 原文地址:https://www.cnblogs.com/shiGuangShiYi/p/13411174.html
Copyright © 2011-2022 走看看