动态设置滚动条高度宽度的方法
如果报表数据量很大,行、列都很多,在WEB页面输出的时候,需要固定报表表头,设置横向、纵向滚动条,通过拖动滚动条来查看报表。但是,当报表输出的标签中滚动条的宽度、高度都是固定值,不能设置成页面宽度高度的百分比,这样由于不同的客户端的分辨率可能不一样,报表展现出来的效果就不一样。对于分辨率小的机器,在页面上看不到滚动条,分辨率大的机器,滚动附近会留出了很大的空白,页面不美观,影响用户体验。 如下图:
原来报表展现页面中报表输出标签设置滚动条的代码是
<report:html name=”report1″ reportFileName=”<%=raqpath%>”
…
needScroll=”yes”
scrollWidth=”300″
scrollHeight=”200″
…
/>
润乾报表提供了灵活的动态设置滚动条高度、宽度的解决方法,如下
首先,加一个redirect.jsp页面,里面加入一个js函数,来获取客户端浏览器窗口的大小
<SCRIPT>
var w = 0;
var h = 0;
//通过深入Document内部对body进行检测,获取浏览器窗口大小
if(document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){
h = document.documentElement.clientHeight;
w = document.documentElement.clientWidth;
}else{
w = 1259 ;
h = 632 ;
}
//重定向到报表所在的jsp页面,并且把客户端浏览器宽度、高度,作为参数传递给报表所在的jsp页面
window.location.href=”<%=path%>/mis2/reportcenter/res/showReport.jsp?<%=param%>&w=”+w+”&h=”+h ;
</SCRIPT>
然后,在展现报表的jsp页面上,增加如下代码来获取浏览器的宽度、高度
String w = request.getParameter(”w”) ;
String h= request.getParameter(”h”) ;
最后,在报表输出的标签中,设置动态获取滚动条的宽度和高度
<report:html name=”report1″ reportFileName=”a.raq”
funcBarLocation=””
params=”<%=param.toString()%>”
needScroll=”yes”
scrollWidth=”<%=w%>” //动态设置滚动条宽度、高度
scrollHeight=”<%=h%>”
/>
现在报表展现如下:
这样,我们就实现了根据客户端浏览器窗口大小,对固定表头报表自动设置滚动条高度、宽度,使用户体验大大提升。
引自:润乾报表知识库
相关文章:显示值or真实值?——谈谈导出excel的数据显示可树形展开的折叠报表的制作;横向分页报表的标题切分;用润乾报表轻松实现动态排序;浏览式报表中如何使用checkbox