JS隐藏报表块滚动条

1.1 问题描述

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

1.2 解决思路

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

2.1 模板设计

2.1.1 新建决策报表

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

2.1.2 新建数据集

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

2.1.2 设计报表块

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

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

2.2 添加初始化后事件

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

JavaScript 代码如下：

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

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

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

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

2.3 预览效果

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

注：不支持移动端。

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

点击下载模板：34-JS实现报表块隐藏滚动条.frm