报表控件FineReport中如何设置自定义翻页按钮
1、自定义翻页按钮
首页、上一页、下一页、末页按钮，直接调用FR内置方法即可，如下首页按钮：
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">首页</button>
其它上一页、下一页、末页按钮分别对应于方法gotoPreviousPage()、gotoNextPage()、gotoLastPage()。
2、页码显示
如上图显示当前报表所在页与报表总页数，获得报表contentPane后可以通过contentPane.currentPageIndex及contentPane.reportTotalPage来获取当前所在页与总页数。
由于页码需要在报表加载完后才能够获得，且翻页后当前页码也要随之变化，因此我们在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文本赋页码信息
});
}
3、跳转到指定页
如上图实现输入某个数字后，点击后面的“跳转”就跳到文本框中写的那页。
给“跳转”加上点击事件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));
}
4、示例完整代码
<html>
<head>
<title>自定义浏览页面</title>
<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="../ReportServer?reportlet=/doc/Primary/DetailReport/Details.cpt&__showtoolbar__=false" width =100% height =80%></iframe>
</body>
</html>
5、效果查看
