【表单JS实例】JS隐藏报表块滚动条

1. 概述
1.1 问题描述

当报表块内容略多时，会出现滚动条，如何隐藏不美观的滚动条，且可以通过鼠标滚轮上下滚动内容呢？

1.2 解决思路

可以使用 JS 获取报表块的整体宽度，通过修改报表的宽度，将滚动条隐藏。

2. 示例
2.1 模板设计
2.1.1 新建决策报表

新建决策报表，设置 body 的布局方式为绝对布局，缩放逻辑为适应区域，如下图所示：

2.1.2 新建数据集

新建数据集 ds1：SELECT * FROM 销量，如下图所示：

2.1.2 设计报表块

1）在决策报表中插入报表块，报表块设计如下图所示：

2）点击工具栏中的冻结，在重复与冻结设置中，设置第 1 行为重复标题行，并冻结第 1 行，如下图所示：

2.2 添加初始化后事件

返回决策报表主体，选中报表块 report0，添加初始化后事件，输入 JavaScript 脚本，如下图所示：

JavaScript 代码如下：

1. setTimeout(function() {
   
2. var a = 'report0'; //获取对应报表块名称
   
3. var b = a.toUpperCase(); //防止大小写出现误差，此处自动将名称转成大写
   
4. var wid = ($("div[widgetname='" + b + "']").width() - 17) + 'px'; //获取报表块宽度
   
5. $("div[widgetname='" + b + "']").css('width', wid); //重置报表块宽度
   
6. var height = ($("div[widgetname='" + b + "']").height() - 16) + 'px'; //获取报表块高度
   
7. $("div[widgetname='" + b + "']").css('height', height); //重置报表块高度
   
8. }, 100);

复制代码

注1：代码中的报表块名称应手动调整为需要隐藏滚动条的报表块名称。

注2：该 JS 中重置了报表块的宽度和高度。如只存在纵向滚动条，无需重置报表块宽度。

注3：此方法不适用于横向需要滚动的情况。

2.3 预览效果

保存模板，点击分页预览，效果如下图所示：

注：不支持移动端。

3. 已完成模板

已完成模板请参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\34-JS实现报表块隐藏滚动条.frm

模板见附件

这种方法我也在用，但是实际上这种方法有缺陷，大屏容易体现出来

挺好的，但是全屏展示滚动条就又出来了，不治本

谢谢了

有没有修改滚动条的样式？原生好难看啊，插件又好贵啊，有没有js脚本控制样式？

非常好 ，吸取一下经验

挺好！

这个方法你浏览器窗口动一动就出来了