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 ，效果如下图所示：
上一篇：自定义批量导出按钮
