历史版本18 :自定义翻页按钮 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 问题描述

自定义如下图翻页按钮：

222

1.2 实现思路

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

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

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

2. 操作步骤编辑

2.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 文本赋页码信息   
      });      
    }

2.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));     
  }

2.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> 

2.4 效果预览

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

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

222