`
starbhhc
  • 浏览: 655480 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

动态设置滚动条高度宽度的方法

阅读更多

如果报表数据量很大,行、列都很多,在WEB页面输出的时候,需要固定报表表头,设置横向、纵向滚动条,通过拖动滚动条来查看报表。但是,当报表输出的标签中滚动条的宽度、高度都是固定值,不能设置成页面宽度高度的百分比,这样由于不同的客户端的分辨率可能不一样,报表展现出来的效果就不一样。对于分辨率小的机器,在页面上看不到滚动条,分辨率大的机器,滚动附近会留出了很大的空白,页面不美观,影响用户体验。 如下图:

yg1.png

原来报表展现页面中报表输出标签设置滚动条的代码是

<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%>”
/>

现在报表展现如下:

yg22.png

这样,我们就实现了根据客户端浏览器窗口大小,对固定表头报表自动设置滚动条高度、宽度,使用户体验大大提升。

分享到:
评论

相关推荐

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    这种设置不会隐藏垂直滚动条,如果页面内容超出视口的高度,垂直滚动条仍然会出现。 对于页面内部的某些特定元素,如表格(table),可能也需要进行类似的设置。如果表格嵌套在具有滚动条的div元素内,则需要确保该...

    javascript获取滚动条高度 页面宽度与高度

    ### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...

    设置MSHFlexGrid滚动条滑块大小的源码

    这段代码通过`GetScrollInfo`和`SetScrollInfo`API获取和设置MSHFlexGrid的垂直滚动条信息,然后根据需求调整滑块的大小(在示例中,我们将滑块大小设置为原来的一半)。请注意,这只是一个基础示例,实际应用中可能...

    自定义滚动条(兼容所有浏览器)

    它们通常通过监听滚动事件,动态创建和更新自定义滚动条元素,从而实现高度的兼容性和定制性。 **4. Accessibility and Performance** 在自定义滚动条时,应考虑无障碍性(Accessibility)和性能。确保滚动条在...

    textarea自适应高度标签,去除难看的滚动条

    /* 定义滚动条宽度 */ } textarea::-webkit-scrollbar-thumb { background: #999; /* 定义滚动条的颜色 */ border-radius: 4px; /* 定义滚动条圆角 */ } ``` 综合以上,我们可以创建一个插件,结合jQuery和CSS,...

    css美化滚动条

    1. `width`和`height`:定义滚动条的宽度或高度。 2. `background-color`:设置滚动条的整体背景色。 3. `border-radius`:设置滚动条的圆角。 4. `cursor`:定义鼠标悬停在滚动条上时的光标形状。 5. `::webkit-...

    ActionScript 3动态文本滚动条模型

    为了使动态文本字段显示滚动条,我们需要设置scrollV(垂直滚动条)和scrollH(水平滚动条)属性。默认情况下,这些属性为false,表示不显示滚动条。若需开启,设置为true: ```actionscript dynamicTextField....

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    unity3D GUI 滚动条自动伸缩添加字符串

    可以通过`Scrollbar`组件进行设置,也可以通过编写脚本控制滚动条的行为,比如通过代码手动改变滚动条的位置,实现自动滚动等效果。 另外,Unity3D提供了UGUI(Unity Graphic User Interface)系统,它是对传统GUI...

    Win10窗口标题栏高度及滚动条宽度怎么设置.docx

    因此,如果你觉得默认的标题栏高度和滚动条宽度适合你,或者修改后影响了使用体验,你可以随时恢复到默认设置,只需将上述键值改回原来的数值,或者删除备份的注册表文件后重启电脑。 总的来说,通过自定义Windows ...

    flex滚动条三种实现方式

    在Flex容器上,如果`overflow`属性设置为`auto`或`scroll`,则会在需要时显示水平或垂直滚动条。例如: ```css .container { display: flex; overflow: auto; /* 或 'scroll' */ } ``` 这种方式简单易用,但...

    外部滚动条控制iframe

    }/* 设置iframe的宽度和高度 */ #d1{width:22px;height:350px;float:left;overflow-x:hidden;overflow-y:scroll;} /* 设置外部滚动条的样式和滚动方向 */ #d2{width:22px;height:2500px;} /* 创建一个高长的div,...

    原生js scrollbars滚动条插件设置浏览器竖直滚动条美化.rar

    通过调整这些伪元素的宽度、高度、背景色、边框等属性,可以实现滚动条的个性化设计。 2. **浏览器兼容性处理**:由于不是所有浏览器都支持CSS3的滚动条样式,因此需要使用JavaScript来实现跨浏览器的滚动条美化。...

    react-reactsmoothscrollbar平滑滚动条的React实现

    `react-smooth-scrollbar`提供了许多可配置的属性,例如` thumb.minSize`(设置滚动条最小宽度/高度)、`overscroll`(控制是否允许超过边界滚动)和`renderThumbHorizontal/Vertical`(自定义水平/垂直滚动条的样式...

    MFC自动水平滚动条CListBox

    我们需要根据列表项的实际宽度来动态设置这个值,确保滚动条可以正确地滚动到所有内容。 为了实现自动水平滚动条的功能,我们还需要在`CHorzListBox`中维护一些状态变量,比如当前的列表项宽度和滚动条的位置,以便...

    jquery给表格加滚动条

    3. 添加CSS样式:为表格设置固定宽度和高度,然后为`&lt;tbody&gt;`添加垂直滚动条。 ```css #scrollingTable { width: 100%; height: 300px; overflow-y: auto; /* 添加垂直滚动条 */ } ``` 4. 使用jQuery:在文档加载...

    自定义滚动条jscroll.js修改改进后可动态重载滚动条

    例如,可以添加一个`refresh`函数,该函数重新计算内容区域的高度和宽度,然后调整自定义滚动条的状态。 3. **自定义滚动条样式**:`jscroll.js`提供了自定义滚动条外观的能力。通过CSS,我们可以改变滚动条的颜色...

    解决多种浏览器获取滚动条高度

    然而,在不同的浏览器环境下,获取滚动条高度的方法并不一致,这为前端开发者带来了挑战。 #### 二、关键概念解释 1. **`window.pageXOffset`**:这是一个非标准但广泛支持的属性,用于获取窗口水平方向上的滚动...

    DIV动态显示滚动条

    这个例子中,`animate()` 方法在1秒内将`DIV`的宽度和高度分别增加50像素,可能因此导致滚动条出现。 最后,要记住,良好的用户体验是关键。在决定何时显示滚动条时,应考虑内容的可读性和用户的预期。例如,可以...

    给groupbox加上滚动条

    4. **调整大小和布局**:为了让滚动条根据需要自动出现,我们需要设置`ScrollViewer`的`HorizontalScrollBarVisibility`和`VerticalScrollBarVisibility`属性。同时,确保`ScrollableGroupBox`的大小调整能够适应...

Global site tag (gtag.js) - Google Analytics