如果报表数据量很大,行、列都很多,在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%>”
/>
现在报表展现如下:
这样,我们就实现了根据客户端浏览器窗口大小,对固定表头报表自动设置滚动条高度、宽度,使用户体验大大提升。
分享到:
相关推荐
javascript 获取滚动条高度 页面宽度 页面高度 教程
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
表格的列很多,而页面宽度有限,但仍需将所有内容展示在表格内,考虑在表格中加入滚动条,教程可参考https://blog.csdn.net/super_DuoLa/article/details/126158919?spm=1001.2014.3001.5501 【有积分可以捧个场,不...
Win10窗口标题栏高度及滚动条宽度怎么设置.docx
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
1、滚动条的设置,滚动条产生的元素以及滚动条里内容的高度 2、通过jQuery点击某个按钮,移动滚动条,从而达到定位到某个位置 3、通过点击按钮,定位到某个元素的位置 4、有滚动条的元素的高宽度一定是比包含在里面...
li数据横向生成滚动条,宽度满屏,高度不变,li数据横向生成滚动条,宽度满屏,高度不变,li数据横向生成滚动条,宽度满屏,高度不变,li数据横向生成滚动条,宽度满屏,高度不变,li数据横向生成滚动条,宽度满屏,...
bgHeight:滚动条父级的高度(在bottom下可以设置这个属性) bgWidth:滚动条父级的宽度(在right下可以设置这个属性) direction:滚动条的位置(right或者bottom) distance:滚动的距离 axle:滚动的方向(left,top) } 3....
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码代码如下: .t_area{ width:300px; overflow-y:visible } <textarea class=”t_area”> 随便在这里输入内容,textarea的高度...
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种 overflow: auto; 在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden...
主程序无法获取到子程序页面的高度和宽度,所以出现双滚动条问题。通过引用两个js解决此方法。
$ npm install react-scrollbar-size@next用法useScrollbarSize自定义钩子返回具有两个属性的对象: 姓名描述width 垂直滚动条的当前宽度height 当前水平滚动条的高度例子要查看实时示例,请按照以下。打字稿import...
一款功能强大的滚动条插件jQuery slimScroll,不仅可以定义高度、宽度,还可以定义位置、滚动条大小、 尺寸、颜色以及众多参数自定义,非常不错,推荐大家使用
当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling=”no” 属性。但是这样一来如果iframe里面的内容是变化的,高度...
一、水平居中布局与滚动条跳动的千年难题...开始只有头部一些信息加载,此时页面高度有限,没有滚动条;然后,更多内容显示,滚动条出现,占据可用宽度,margin: 0 auto主体元素自然会做偏移——跳动产生。 JS交互,本
但是当页面出现滚动条时,dialog并没有随着滚动条往下滚动,这时就需要用户滑动滚动条来定位dialog,这不人性化,在说出解决方案前先来普及一下jquery关于定位的几个方法 代码如下: //获取浏览器显示区域的高度 $...
本文实例讲述了JS模拟简易滚动条效果的方法。分享给大家供大家参考,具体如下: 使用Js模拟滚动条。简易模式,类似手机上常见的滚动条。 效果如下: Js代码如下: var scrollMoveObj = null, scrollPageY = 0, ...
在SWING中嵌套使用JScrollPane时,会出现诸多显示问题,如内层JScrollPane的...如果需要显示内层的滚动条,则需要外层Scroll组件的view视图组件继承Scrollable接口,来强制内部组件高度或宽度自适应,解决以上问题。