自定义翻页按钮

编辑
文档创建者:文档助手1 (67727 )     浏览次数:5647次     编辑次数:14次     最近更新:林少 于 2018-07-09     

目录:

1. 问题描述编辑

自定义如下图翻页按钮:
222

2. 实现思路编辑

自定义按钮章节可以知道,如上图中的首页、上一页、下一页、末页按钮,直接调用FR内置方法即可,如下首页按钮:
<button type="button" >首页</button>
其它上一页、下一页、末页按钮分别对应于方法gotoPreviousPage()gotoNextPage()gotoLastPage()。获取当前所在页与总页数对应方法contentPane.currentPageIndexcontentPane.reportTotalPage

3. 实现方法编辑

3.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文本赋页码信息 }); }
3.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)); }
3.3 示例完整代码
<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>
已完成示例请查看%FR_HOME%\WebReport\page_demo\goPage.html

在线查看示例效果请点击goPage.html

附件列表


主题: 部署集成
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?