历史版本4 :JS隐藏报表块滚动条 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

在 报表块实现跑马灯效果 中,可以使用$("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow = "hidden";隐藏滚动条,达到报表块自动滚动的效果,但是如果不设置自动滚动,会发现滚动条虽然隐藏了,却不能使用鼠标滚轮上下滚动列表。


2. 思路编辑

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


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);


3. 操作步骤编辑

3.1 新建报表

1)新建决策报表,将 body 的布局方式设置为绝对布局,缩放逻辑设置为适应区域

222
2)新建一个数据集 ds1:SELECT * FROM 销量

3)将报表块拖入决策报表主体,报表块设计如下:

222

4)点击工具栏中的冻结,在重复与冻结设置中,设置第一行为重复标题行,并冻结第一行
222


3.2 添加初始化后事件

返回决策报表主体,选中报表块,添加初始化后事件

2.pngJS 代码如下:


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);

注:由于设置了冻结标题行,会出现横向和纵向滚动条,所以 JS 中重置了报表块的宽度和高度。根据实际情况隐藏相应的滚动条,纵向滚动条重置报表块宽度,横向滚动条重置报表块高度。 

注:此方法仅适用于横向不需要滚动的情况,如果报表块列数太多导致横向出现滚动条,使用此方法则无法使用鼠标操作报表块横向滚动。


4. 预览效果编辑

4.1 PC 端预览效果

222


4.2 移动端预览效果

注:不支持移动端。