如果报表数据量很大,行、列都很多,在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%>”
/>
现在报表展现如下:
这样,我们就实现了根据客户端浏览器窗口大小,对固定表头报表自动设置滚动条高度、宽度,使用户体验大大提升。
分享到:
相关推荐
这种设置不会隐藏垂直滚动条,如果页面内容超出视口的高度,垂直滚动条仍然会出现。 对于页面内部的某些特定元素,如表格(table),可能也需要进行类似的设置。如果表格嵌套在具有滚动条的div元素内,则需要确保该...
### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...
这段代码通过`GetScrollInfo`和`SetScrollInfo`API获取和设置MSHFlexGrid的垂直滚动条信息,然后根据需求调整滑块的大小(在示例中,我们将滑块大小设置为原来的一半)。请注意,这只是一个基础示例,实际应用中可能...
它们通常通过监听滚动事件,动态创建和更新自定义滚动条元素,从而实现高度的兼容性和定制性。 **4. Accessibility and Performance** 在自定义滚动条时,应考虑无障碍性(Accessibility)和性能。确保滚动条在...
/* 定义滚动条宽度 */ } textarea::-webkit-scrollbar-thumb { background: #999; /* 定义滚动条的颜色 */ border-radius: 4px; /* 定义滚动条圆角 */ } ``` 综合以上,我们可以创建一个插件,结合jQuery和CSS,...
1. `width`和`height`:定义滚动条的宽度或高度。 2. `background-color`:设置滚动条的整体背景色。 3. `border-radius`:设置滚动条的圆角。 4. `cursor`:定义鼠标悬停在滚动条上时的光标形状。 5. `::webkit-...
为了使动态文本字段显示滚动条,我们需要设置scrollV(垂直滚动条)和scrollH(水平滚动条)属性。默认情况下,这些属性为false,表示不显示滚动条。若需开启,设置为true: ```actionscript dynamicTextField....
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
可以通过`Scrollbar`组件进行设置,也可以通过编写脚本控制滚动条的行为,比如通过代码手动改变滚动条的位置,实现自动滚动等效果。 另外,Unity3D提供了UGUI(Unity Graphic User Interface)系统,它是对传统GUI...
因此,如果你觉得默认的标题栏高度和滚动条宽度适合你,或者修改后影响了使用体验,你可以随时恢复到默认设置,只需将上述键值改回原来的数值,或者删除备份的注册表文件后重启电脑。 总的来说,通过自定义Windows ...
在Flex容器上,如果`overflow`属性设置为`auto`或`scroll`,则会在需要时显示水平或垂直滚动条。例如: ```css .container { display: flex; overflow: auto; /* 或 'scroll' */ } ``` 这种方式简单易用,但...
}/* 设置iframe的宽度和高度 */ #d1{width:22px;height:350px;float:left;overflow-x:hidden;overflow-y:scroll;} /* 设置外部滚动条的样式和滚动方向 */ #d2{width:22px;height:2500px;} /* 创建一个高长的div,...
通过调整这些伪元素的宽度、高度、背景色、边框等属性,可以实现滚动条的个性化设计。 2. **浏览器兼容性处理**:由于不是所有浏览器都支持CSS3的滚动条样式,因此需要使用JavaScript来实现跨浏览器的滚动条美化。...
`react-smooth-scrollbar`提供了许多可配置的属性,例如` thumb.minSize`(设置滚动条最小宽度/高度)、`overscroll`(控制是否允许超过边界滚动)和`renderThumbHorizontal/Vertical`(自定义水平/垂直滚动条的样式...
我们需要根据列表项的实际宽度来动态设置这个值,确保滚动条可以正确地滚动到所有内容。 为了实现自动水平滚动条的功能,我们还需要在`CHorzListBox`中维护一些状态变量,比如当前的列表项宽度和滚动条的位置,以便...
3. 添加CSS样式:为表格设置固定宽度和高度,然后为`<tbody>`添加垂直滚动条。 ```css #scrollingTable { width: 100%; height: 300px; overflow-y: auto; /* 添加垂直滚动条 */ } ``` 4. 使用jQuery:在文档加载...
例如,可以添加一个`refresh`函数,该函数重新计算内容区域的高度和宽度,然后调整自定义滚动条的状态。 3. **自定义滚动条样式**:`jscroll.js`提供了自定义滚动条外观的能力。通过CSS,我们可以改变滚动条的颜色...
然而,在不同的浏览器环境下,获取滚动条高度的方法并不一致,这为前端开发者带来了挑战。 #### 二、关键概念解释 1. **`window.pageXOffset`**:这是一个非标准但广泛支持的属性,用于获取窗口水平方向上的滚动...
这个例子中,`animate()` 方法在1秒内将`DIV`的宽度和高度分别增加50像素,可能因此导致滚动条出现。 最后,要记住,良好的用户体验是关键。在决定何时显示滚动条时,应考虑内容的可读性和用户的预期。例如,可以...
4. **调整大小和布局**:为了让滚动条根据需要自动出现,我们需要设置`ScrollViewer`的`HorizontalScrollBarVisibility`和`VerticalScrollBarVisibility`属性。同时,确保`ScrollableGroupBox`的大小调整能够适应...