自訂翻頁按鈕- 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 日本語

中文（繁體）

自訂翻頁按鈕