1、实现原理以上例子便实现了iframe框架自适应报表高度需求,主要思路如下1.1首先点击上一页、下一页等按钮调用FineReport封装好的js事件如gotoLastPage(),后台服务器将对应的结果返回给浏览器;1.2添加监听我们需要获取服务器返回给浏览器的页面,因此需要添加一个监听看浏览器是否已经将结果加载完毕。添加监听的方法为contentPane.on("afterload",function(){});
2、3设置框架高度一旦发现浏览器已经将结果加载完毕,我们便可以获取结果如最后一页数据有多少行,遍历每行获得高度并进行累计,将最终需要的高度(像素px为单位)赋给框架。for(vari=0;i<tr.length;i++){//由于报表页面加载完成之后,可能会将单元格也在加载成一个tr,会导致重复计算,这里通过条件判断来获取行的trif(tr[i].id.substring(0,1)=="r"){height=height+tr[i].offsetHeight;}}reportFrame.height=height;注:由于报表在计算解析成html的时候,可能会将单元格也解析成为一个tr,所以需要遍历所有tr判断一下单元格是否被解析为一个tr。实现如上效果,请看下面完整的页面代码:
3、实现步骤2.1页面auto.html完整代码<!DOCTYPEHTMLPUBLIC&qu泠贾高框ot;-//W3C//DTDHTML4.0Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>Demo</title></head><scripttype="text/javascript">//由于gotoNextPage()等方法调用后,后台服务器返回结果需要一定的时间,而我们需要获得返回结果中的行//因此添加监听,contentPane.on("afterload",function(){}):当选择页加载完毕后调用setframeHeight方法获取行数及高度从而调整框架大小window.onload=function(){varcontentPane=document.getElementById('reportFrame').contentWindow.contentPane;contentPane.on("afterload",function(){setframeHeight();});}functionsetframeHeight(){varreportFrame=document.getElementById('reportFrame');
4、//获得页面中的所有行vartr=reportFrame.contentWindow.document.getElementsByTagName("tr");//为了避免报表加载结束后出现滚动条现象,这里将报表容器的overflow属性设置为hidden//由于在报表容器属性的设置只能在报表计算之后,所以用setTimeout来设置延迟执行时间,如果数据过多,请按照具体情况修改延迟时间setTimeout(function(){document.getElementById('reportFrame').contentWindow.document.getElementById("content-container").style.overflow="hidden";},10)//由于报表页面还存在页边距,因此框架高度是大于所有行累计的高度的,这里赋一个初始值以表示边距的大小varheight=100;for(vari=0;i<tr.length;i++){//由于报表页面加载完成之后,可能会将单元格也在加载成一个tr,会导致重复计算,这里通过条件判断来获取行的trif(tr[i].id.substring(0,1)=="r"){height=height+tr[i].offsetHeight;}}reportFrame.height=height;}</script><body><divid="toolbar"><inputtype="button"onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage();"value="首页"></input><inputtype="button"onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage();"value="上一页"></input><inputtype="button"onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage();"value="下一页"></input><inputtype="button"onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage();"value="末页"></input></div>
5、<iframeid="reportFrame"src="/WebReport/ReportServer?reportlet=/doc/Primary/DetailReport/Details.cpt&__showtoolbar__=false"width=100%height=80%frameborder="0"></iframe><p>页面其他部分</p></body><html>3.预览效果将代码保存至WebReport\page_demo\auto.html,启动服务器,在浏览器中输入http://localhost:8075/WebReport/page_demo/auto.html,便可以看到效果了。在线查看示例效果请点击auto.html