反饋已提交
網絡繁忙
用户将网页中的一部分嵌入了一张报表模板,有时希望能够自己定义翻页按钮,不使用报表已有的按钮,如下图所示:
由 自定义按钮 章节可知,如上图中的首页、上一页、下一页、末页按钮,直接调用 FR 内置方法即可
首页按钮调用方法:gotoFirstPage()
上一页按钮调用方法:gotoPreviousPage()
下一页按钮调用方法:gotoNextPage()
末页按钮按钮调用方法:gotoLastPage()
获取当前所在页与总页数对应方法「contentPane.currentPageInde x」及 「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 文本赋页码信息 }); }
如上图实现输入某个数字后,点击后面的“跳转”就跳到文本框中写的那页。
给「跳转」加上点击事件 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)); }
<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>
启动设计器,在浏览器输入:http://localhost:8075/webroot/help/page_demo/goPage.html ,效果如下图所示:
已完成页面请查看%FR_HOME%/webapps/webroot/help/page_demo/goPage.html
html 文件:
goPage.html
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉