自定义翻页按钮- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 问题描述

用户将网页中的一部分嵌入了一张报表模板，有时希望能够自己定义翻页按钮，不使用报表已有的按钮，如下图所示：

1.2 实现思路

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

首页按钮调用方法：gotoFirstPage()
上一页按钮调用方法：gotoPreviousPage()
下一页按钮调用方法：gotoNextPage()
末页按钮按钮调用方法：gotoLastPage()

获取当前所在页与总页数对应方法「contentPane.currentPageIndex」及「contentPane.reportTotalPage」

2. 操作步骤

2.1 新建 HTML 文件

1）新建goPage.html，内容如下：

点击下载文件：goPage.zip

<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._g();  //获取报表 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._g();     
    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._g().gotoFirstPage()">首页</button>     
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoPreviousPage()">上一页</button>      
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoNextPage()">下一页</button>       
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().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）将goPage.html放置到 %FR_HOME%\webapps\webroot\help\page_demo 路径下。

2.2 效果预览

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

222

已經是第一篇

下一篇：更新日誌索引

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

自定义翻页按钮