自定义翻页按钮

编辑
  • 文档创建者:文档助手1
  • 浏览次数:7331次
  • 编辑次数:17次
  • 最近更新:Kevin-s 于 2019-06-09
  • 1. 问题描述

    自定义如下图翻页按钮:



    2. 实现思路

    由 自定义按钮 章节可以知道,如上图中的首页、上一页、下一页、末页按钮,直接调用FR内置方法即可

    首页、上一页、下一页、末页按钮分别对应于方法 gotoFirstPage()gotoPreviousPage()gotoNextPage()gotoLastPage()

    获取当前所在页与总页数对应方法 contentPane.currentPageInde x及 contentPane.reportTotalPage

    3. 实现方法

    3.1 页码显示的功能

    由于页码需要在报表加载完后才能够获得,且翻页后当前页码也要随之变化,因此我们在 contentPane 的加载结束后监听 afterload 事件中将页码信息赋给文本框。

    function afterload() {     //iframe加载后触发
          var contentPane = document.getElementById("reportFrame").contentWindow.contentPane;  //获取报表 contentPane   
          var cPageIndex = contentPane.currentPageIndex;   //当前所在页
          var pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";   //报表首次加载结束后显示的页码信息
      document.getElementById("page").value = pv;     //将页码信息赋给 page 文本
          contentPane.on("afterload", function() {      //报表加载结束监听事件
            cPageIndex = contentPane.currentPageIndex;      //每次加载完后重新获取当前页码
            pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";     //重新生成页码信息 
            document.getElementById("page").value = pv;      //重新给 page 文本赋页码信息   
          });      
        }

    3.2 跳转到指定页功能

    如上图实现输入某个数字后,点击后面的“跳转”就跳到文本框中写的那页。

    给“跳转”加上点击事件 gotopage,在JS  中获取文本框中输入的页码,通过 contentpane.gotoPage(parseInt(num)) 跳转到指定页。

    注:gotoPage() 中的参数必须是数值型的,而文本框中输入的为字符串,因此需要使用 parseInt() 将其转为数值。

    function gotopage() {     
        var contentpane= document.getElementById('reportFrame').contentWindow.contentPane;     
        var page = document.getElementById("index").value;     
        if(page >= contentpane.reportTotalPage) {     
          contentpane.gotoLastPage();     
        }      
        contentpane.gotoPage(parseInt(page));     
      }

    3.3 示例完整代码

    <html>     
      <head>     
      <title>自定义翻页按钮</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
      <script type="text/javascript">     
        function afterload() {     //iframe 加载后触发
          var contentPane = document.getElementById("reportFrame").contentWindow.contentPane;  //获取报表 contentPane   
          var cPageIndex = contentPane.currentPageIndex;   //当前所在页
          var pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";   //报表首次加载结束后显示的页码信息
        document.getElementById("page").value = pv;     //将页码信息赋给 page 文本
          contentPane.on("afterload", function() {      //报表加载结束监听事件
            cPageIndex = contentPane.currentPageIndex;      //每次加载完后重新获取当前页码
            pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";     //重新生成页码信息 
            document.getElementById("page").value = pv;      //重新给 page 文本赋页码信息   
          });      
        }     
      function gotopage() {     
        var contentpane= document.getElementById('reportFrame').contentWindow.contentPane;     
        var page = document.getElementById("index").value;     
        if(page >= contentpane.reportTotalPage) {     
          contentpane.gotoLastPage();     
        }      
        contentpane.gotoPage(parseInt(page));     
      }     
    </script>     
    </head>   
    <body>     
      <div id="toolbar">     
        <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">首页</button>     
        <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage()">上一页</button>      
        <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage()">下一页</button>       
        <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage()">末页</button>
        <input id="page" type="text" readonly="true" size="12" style="border:none">     
        到<input id ="index" type ="text" size="3"/>页 <a onclick="gotopage()" href="javascript:void(0)">跳转</a>
      </div>     
      <iframe id="reportFrame" onload="afterload()" src="../../decision/view/report?viewlet=/doc/Primary/DetailReport/Details.cpt&__showtoolbar__=false" width =100% height =80%></iframe>     
    </body>     
    </html> 

    3.4 保存预览

    已完成页面请查看%FR_HOME%/webapps/webroot/help/page_demo/goPage.html


    启动设计器,在浏览器输入:http://localhost:8075/webroot/help/page_demo/goPage.html ,效果如下图:



    附件列表


    主题: 部署集成
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]