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