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

1. 描述编辑

自定义如下图翻页按钮：

2. 实现步骤编辑

2.1 自定义翻页按钮
由自定义按钮章节可以知道，如上图中的首页、上一页、下一页、末页按钮，直接调用FR内置方法即可，如下首页按钮：
  1. <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">首页</button>  
其它上一页、下一页、末页按钮分别对应于方法gotoPreviousPage()、gotoNextPage()、gotoLastPage()。
2.2 页码显示
如上图显示当前报表所在页与报表总页数，获得报表contentPane后可以通过contentPane.currentPageIndex及contentPane.reportTotalPage来获取当前所在页与总页数。
由于页码需要在报表加载完后才能够获得，且翻页后当前页码也要随之变化，因此我们在contentPane的加载结束后监听afterload事件中将页码信息赋给文本框。
  1. function afterload() {     //iframe加载后触发  
  2.       var contentPane = document.getElementById("reportFrame").contentWindow.contentPane;  //获取报表contentPane     
  3.       var cPageIndex = contentPane.currentPageIndex;   //当前所在页  
  4.       var pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";   //报表首次加载结束后显示的页码信息  
  5.       document.getElementById("page").value = pv;     //将页码信息赋给page文本  
  6.   
  7.       contentPane.on("afterload", function() {      //报表加载结束监听事件  
  8.         cPageIndex = contentPane.currentPageIndex;      //每次加载完后重新获取当前页码  
  9.         pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";     //重新生成页码信息   
  10.         document.getElementById("page").value = pv;      //重新给page文本赋页码信息     
  11.       });        
  12.     }  
2.3 跳转到指定页
如上图实现输入某个数字后，点击后面的“跳转”就跳到文本框中写的那页。
给“跳转”加上点击事件gotopage，在js中获取文本框中输入的页码，通过contentpane.gotoPage(parseInt(num)) 跳转到指定页。
注：gotoPage()中的参数必须是数值型的，而文本框中输入的为字符串，因此需要使用parseInt()将其转为数值。
  1. function gotopage() {       
  2.     var contentpane= document.getElementById('reportFrame').contentWindow.contentPane;       
  3.     var page = document.getElementById("index").value;       
  4.     if(page >= contentpane.reportTotalPage) {       
  5.       contentpane.gotoLastPage();       
  6.     }        
  7.     contentpane.gotoPage(parseInt(page));       
  8.   }  
2.4 示例完整代码
  1. <html>       
  2.   <head>       
  3.   <title>自定义浏览页面</title>       
  4.   <script type="text/javascript">       
  5.     function afterload() {     //iframe加载后触发  
  6.       var contentPane = document.getElementById("reportFrame").contentWindow.contentPane;  //获取报表contentPane     
  7.       var cPageIndex = contentPane.currentPageIndex;   //当前所在页  
  8.       var pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";   //报表首次加载结束后显示的页码信息  
  9.       document.getElementById("page").value = pv;     //将页码信息赋给page文本  
  10.   
  11.       contentPane.on("afterload", function() {      //报表加载结束监听事件  
  12.         cPageIndex = contentPane.currentPageIndex;      //每次加载完后重新获取当前页码  
  13.         pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页";     //重新生成页码信息   
  14.         document.getElementById("page").value = pv;      //重新给page文本赋页码信息     
  15.       });        
  16.     }       
  17.   
  18.   function gotopage() {       
  19.     var contentpane= document.getElementById('reportFrame').contentWindow.contentPane;       
  20.     var page = document.getElementById("index").value;       
  21.     if(page >= contentpane.reportTotalPage) {       
  22.       contentpane.gotoLastPage();       
  23.     }        
  24.     contentpane.gotoPage(parseInt(page));       
  25.   }       
  26. </script>       
  27. </head>       
  28. <body>       
  29.   <div id="toolbar">       
  30.     <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">首页</button>       
  31.     <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage()">上一页</button>        
  32.     <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage()">下一页</button>         
  33.     <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage()">末页</button>  
  34.     <input id="page" type="text" readonly="true" size="12" style="border:none">       
  35.     到<input id ="index" type ="text" size="3"/>页 <a onclick="gotopage()" href="javascript:void(0)">跳转</a>  
  36.   </div>       
  37.   <iframe id="reportFrame" onload="afterload()" src="../ReportServer?reportlet=/doc/Primary/DetailReport/Details.cpt&__showtoolbar__=false" width =100% height =80%></iframe>       
  38. </body>       
  39. </html>   
由于用户自定义工具栏，显示报表时不需要显示FR内置工具栏，因此在报表url后面加上&__showtoolbar__=false。
已完成示例请查看%FR_HOME%\WebReport\page_demo\goPage.html

在线查看示例效果请点击goPage.html