1. 概述
1.1 問題描述
用戶将網頁中的一部分嵌入了一張報表模板，有時希望能夠自己定義翻頁按鈕，不使用報表已有的按鈕，如下圖所示：
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 效果預覽
啓動設計器，在浏覽器輸入：http://localhost:8075/webroot/help/page_demo/goPage.html ，效果如下圖所示：
