电子表格FineReport教程：[17]自定义按钮
下面就通过电子表格FineReport来简单介绍一下自定义按钮。
工具/原料
电子表格FineReport7.1.1
大小：148.2M 适用平台：windows/linux
自定义翻页按钮
1、描述自定义如下图翻页按钮：
![电子表格FineReport教程：[17]自定义按钮](https://exp-picture.cdn.bcebos.com/90c61d1c99c0affcaa8bfb9c2372941fbfe4eaa0.jpg)
2、实现思路通过在某个单元格中使用count函数计算总的数据条数，然后在分页预览的加载结束事件中获取对应单元格的值并赋值给页面中的文本框。注：使用count函数的单元格必须在扩展数据的上方单元格。
3、产生问题点击下一页时，单元格中显示的是下一页数据中对应单元格的数据而不是总条数。
4、解决方案通过使用重复标题行，让count函数所在的单元格固定在一个位置。
5、模板设置打开模板打开模板：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Primary\DetailReport\Details_5.cpt修改模板在第一行数据前，插入一行数据，然后在A1单元格填写=count(A3)，如下图所示：
![电子表格FineReport教程：[17]自定义按钮](https://exp-picture.cdn.bcebos.com/6061b9cd0c6efbf259beaa64127bbbf4db58daa0.jpg)
7、加载结束事件设置给此模板增加加载结束事件，具体的JS代码如下：var totalnumber=$("tr[tridx=0]","div.content-container").children().eq(0).text();//获取A1单元格的值parent.document.getElementById("e").value="共"+totalnumber+"条数据";//给页面上id为e的文本框赋值保存模板
8、页面设置打开html页面打开%FR_HOME%\WebReport\page_demo\custoolbar.html。增加一个文本框在body标签中的div标签中增加一个文本框控件，控件的id为e，定义如下：<input type = "text" id = "e" style="width:50px">更换iframe的src将iframe的src更换为刚刚保存的模板即为：/WebReport/ReportServer?reportlet=/doc/Primary/DetailReport/Details_7.cpt&__showtoolbar__=false
9、完整代码完整代码如下：<html> <head> <title>自定义浏览页面</title媪青怍牙> <script type="text/javascript"> function afterload(){ var contentPane = document.getElementById("reportFrame").contentWindow.contentPane; var cPageIndex = contentPane.currentPageIndex; var pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页"; document.getElementById("a").value = pv; contentPane.on("afterload", function(){ cPageIndex = contentPane.currentPageIndex; pv = "第" + cPageIndex + "页/共" + contentPane.reportTotalPage + "页"; document.getElementById("a").value = pv; }); } function gotopage() { var contentpane= document.getElementById('reportFrame').contentWindow.contentPane; var page = document.getElementById("c").value; if(page >= contentpane.reportTotalPage) { contentpane.gotoLastPage(); } contentpane.gotoPage(parseInt(page)); } </script> </head> <body> <div id="toolbar"> <input type = "text" id = "e" style="width:80px"><button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">首页</button> <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage()">上一页</button> <input id="a" type="text" readonly="true" style="width:80px"> <lable id ="b">到</lable> <input id ="c" type ="text" style="width:30px" onchange="gotopage()"/> <lable id ="d">页</lable> <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage()">下一页</button> <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage()">末页</button> </div> <iframe id="reportFrame" onload="afterload()" src="/WebReport/ReportServer?reportlet=/doc/Primary/DetailReport/Details_7.cpt&__showtoolbar__=false" width = 100% height = 80%></iframe> </body> </html>
10、效果查看访问totalnumber.html即可查看效果，效果如上图。
自定义导出按钮
1、报表嵌在iframe中如果是报表嵌在iframe中，在html页面可直接调用FR内部的导出方法，如导出PDF、导出Excel（分页）、导出Excel（原样）、导出Excel（分页分sheet）、导出Word等，界面效果如下：
![电子表格FineReport教程：[17]自定义按钮](https://exp-picture.cdn.bcebos.com/50a010f85856d53dc329075a47d2bb665059caa0.jpg)
2、示例我们使用模板FR_HOME%\WebReport\掳姗浚瑙WEB-INF\reportlets\doc\Advanced\Chart\Bubble.cpt来作为内嵌iframe。首囗寝嗵若先定义javascript代码触发放大缩小的功能，代码如下：<script type="text/javascript"> function afterload(){ document.getElementById('reportFrame').contentWindow.contentPane.scale('-'); fuzhi(); } function afterload2(){ document.getElementById('reportFrame').contentWindow.contentPane.scale('+'); fuzhi(); } function fuzhi() { var contentPane = document.getElementById("reportFrame").contentWindow.contentPane; var zoom = contentPane.zoom * 100 +"%"; document.getElementById("zoom").value = zoom; //将新的显示百分比赋给zoom文本框 } </script>
3、其次在body里面直接调用js里面定义好的方法，代码如下：<body onload="fuzhi()"> <div id="toolbar"> <input type="button" onclick="afterload();" value="-"></input> <input id="zoom" type="text" readonly="true" style="width: 80px"> <input type="button" onclick="afterload2();" value="+"></input> </div>
4、完整代码如下<html> <head> <title>FineReport Demo媪青怍牙</title> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> </head><script type="text/javascript"> function afterload(){ document.getElementById('reportFrame').contentWindow.contentPane.scale('-'); fuzhi(); } function afterload2(){ document.getElementById('reportFrame').contentWindow.contentPane.scale('+'); fuzhi(); } function fuzhi() { var contentPane = document.getElementById("reportFrame").contentWindow.contentPane; var zoom = contentPane.zoom * 100 +"%"; document.getElementById("zoom").value = zoom; //将新的显示百分比赋给zoom文本框 } </script> <body> <iframe id="reportFrame" width="900" height="500" src="/WebReport/ReportServer?reportlet=/doc/Advanced/Chart/Bubble.cpt"></iframe> <body onload="fuzhi()"> <div id="toolbar"> <input type="button" onclick="afterload();" value="-"></input> <input id="zoom" type="text" readonly="true" style="width: 80px"> <input type="button" onclick="afterload2();" value="+"></input> </div></body> </html>
自定义提交按钮
1、问题描述在我们使用填报表时，有时只需要提交按钮将数据入库，不希望使用FR内置的工具栏的按钮，希望能够自定义提交按钮，自定义按钮既可以是FineReport模板中添加的按钮控件，也可以是web集成页面中，html的按钮标签，FineReport模板中的按钮控件实现自定义提交操作详细请参照自定义按钮实现提交操作，而在web页面中，点击html中的按钮提交iframe中的FineReport报表就在下面详述。效果如下图:
![电子表格FineReport教程：[17]自定义按钮](https://exp-picture.cdn.bcebos.com/ed792abb19efa25f70191dc859828689a0463ba1.jpg)
2、实现方法使用模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\FreeFrom\FreeForm.cpt在网页中添加按钮代码如下：<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.writeReport()">提交</button>
3、完整代码：<html> <head> <title>自定义浏览页面</title> </head> <body> <div id="toolbar"> <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.writeReport()">提交</button></div> <iframe id="reportFrame" onload="afterload()" src="/WebReport/ReportServer?reportlet=doc\Form\FreeFrom\FreeForm.cpt&__showtoolbar__=false" width = 100% height = 80%></iframe> </body> </html>