电子表格FineReport教程：[17]自定义按钮

时间：2024-10-16 12:18:13

下面就通过电子表格FineReport来简单介绍一下自定义按钮。

工具/原料

电子表格FineReport7.1.1

大小：148.2M 适用平台：windows/linux

自定义翻页按钮

1、描述自定义如下图翻页按钮：

2、自定义翻页按钮如上图中的首页、上一页、下一页、末页按钮，直接调用FR内置方法即可，如下首页按钮：<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">首页</button>其它上一页、下一页、末页按钮分别对应于方法gotoPreviousPage()、gotoNextPage()、gotoLastPage()。

3、页码显示如上兔脒巛钒图显示当前报表所在页与报表总页数，获得报表contentPane后可以通过contentPane.currentPageIndex及contentPane.reportTotal霸烹钟爷Page来获取当前所在页与总页数。由于页码需要在报表加载完后才能够获得，且翻页后当前页码也要随之变化，因此我们在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文本赋页码信息 }); }

4、跳转到指定页如上图实现输入某个数字后，点击后面的“跳转”就跳到文本框中写的那页。给“跳转”加上点击事件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)); }

5、示例完整代码<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内置工具栏，因此在报表url后面加上&__showtoolbar__=false。

工具栏上显示数据总个数

1、问题描述在自定义工具栏中，可以显示总页数，那么有什么方法能实现如下图所示，显示数据的总个数呢？

2、实现思路通过在某个单元格中使用count函数计算总的数据条数，然后在分页预览的加载结束事件中获取对应单元格的值并赋值给页面中的文本框。注：使用count函数的单元格必须在扩展数据的上方单元格。

3、产生问题点击下一页时，单元格中显示的是下一页数据中对应单元格的数据而不是总条数。

4、解决方案通过使用重复标题行，让count函数所在的单元格固定在一个位置。

5、模板设置打开模板打开模板：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Primary\DetailReport\Details_5.cpt修改模板在第一行数据前，插入一行数据，然后在A1单元格填写=count(A3)，如下图所示：

6、隐藏行列隐藏第一行单元格，右击第一行，弹出下图：选择隐藏即可。

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等，界面效果如下：

2、需要添加的代码如下<button type="button" onclick="docume荏鱿胫协nt.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()">导出[PDF]</button> <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">导出[Excel](分页)</button><button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple')">导出[Excel](原样)</button><button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet')">导出[Excel](分页分Sheet)</button><button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">导出[Word]</button>

3、报表未嵌在iframe中还有一种情况视报表没有嵌入在iframe中或者导出的报表与预览的报表不同，这时可以采用window.open()方法。这时可以将上述的button的onclick事件修改，代码为<button type="button" onclick="window.open(FR.cjkEncode('/WebReport/ReportServer?reportlet=doc/Primary/Parameter/parameter.cpt&地区=华东')+'&format=excel')">导出[Excel]</button>

自定义批量导出

1、问题描述当需要根据不同用户不同地区导出多个报表时，不希望分别导出相应格式进行备份，比较麻烦，希望可以把多个报表同时导出成某种格式了。这样要怎样实现呢？下面详细介绍使用步骤：

2、原理当您批量导出的报表中无参数时，可以将页面地址改为如下格式：http://localhost:呖分甾胗8075/WebR髫潋啜缅eport/ReportServer?reportlets=({reportlet:/doc/Primary/CrossReport/Cross.cpt},{reportlet:/doc/Primary/DetailReport/Details.cpt})&format=XX当您批量导出的报表中带有参数时，可使将页面地址改为如下格式：http://localhost:8075/WebReport/ReportServer?reportlets=({reportlet:/doc/reportname.cpt,paraname1:paravalue1,paraname2:paravalue2,...},{reportlet:/doc/reportname.cpt,paraname1:paravalue1,paraname2:paravalue2,...},{...})&format=XX注：format后面的XX，是指导出文件的格式，如果导出的是pdf，就写&format=pdf。其中{reportlet:/doc/reportname.cpt}，是模板的访问路径；paraname1:paravalue1，是指导出各模板内容时，对应的参数名和参数值,多个参数中间用逗号隔开。另：批量导出时导出的是一个文件，如果是excel，则会将多个报表导出在多个sheet中。批量导出时，如果需要对导出的文件重命名，可以在url后面加上"&__filename__=name"，"name"就是自定义的文件名.http://localhost:8075/WebReport/ReportServer?reportlets=({reportlet:/doc/reportname.cpt,paraname1:paravalue1})&__filename__=name

3、实现步骤我们用一个按键来实现无参数导出成excel格式，只需要添加一个+'&format=excel按钮，将路径设置为上述格式，代码如下<button type="button" onclick="window.open(FR.cjkEncode('/WebReport/ReportServer?reportlet=({reportlet:/doc/Primary/Parameter/Parameter.cpt,地区:华北},{reportlet:/doc/Primary/CrossReport/Cross.cpt})'+'&format=excel'))">导出[Excel]</button> 上面的按钮的作用是导出地区参数为华北的Parameter.cpt和无参数Cross.cpt注:自定义批量导出时，如果在导出的同时还在下载多个文件，推荐将浏览器的安全级别降低，避免被浏览器将导出文件判定为不安全文件。

自定义缩放按钮

1、问题描述一般情况下我们将网页中的一部分潜入了一张FR做的报表，图表数据比较密集，我们希望能够进行缩放，从而更加清楚地查看报表，就需要定义报表的缩放。缩放可放大和缩小报表页面，Web页面调用,效果如下;注：也可以直接在模板工具栏中添加缩放按钮。

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、完整代码如下<htm盟敢势袂l> <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报表就在下面详述。效果如下图:

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>