历史版本2 :JS隐藏报表块滚动条 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
在报表块实现跑马灯效果中,可以使用$("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow = "hidden";隐藏滚动条,达到报表块自动滚动的效果,但是如果不设置自动滚动,会发现滚动条虽然隐藏了,却不能使用鼠标滚轮上下滚动列表。
2. 思路编辑
我们可以使用js获取报表块的整体宽度,通过修改报表的宽度,将滚动条隐藏:
setTimeout(function(){
var wid=($("div[widgetname='REPORT0']").width()-17)+'px'; //获取报表块宽度
$("div[widgetname='REPORT0']").css('width',wid); //重置报表块宽度
var height=($("div[widgetname='REPORT0']").height()-16)+'px'; //获取报表块高度
$("div[widgetname='REPORT0']").css('height',height); //重置报表块高度
},1000);
3. 操作步骤编辑
3.1 新建报表
1)新建决策报表,将body的布局方式设置为绝对布局,缩放逻辑设置为适应区域:
2)新建一个数据集ds1:SELECT * FROM 销量。
3)将报表块拖入决策报表主体,报表块设计如下:
4)点击工具栏中的冻结,在重复与冻结设置中,设置第一行为重复标题行,并冻结第一行:
3.2 添加初始化后事件
返回决策报表主体,选中报表块,添加初始化后事件:
js代码如下:
setTimeout(function() {
//获取报表块宽度
var wid = ($("div[widgetname='REPORT0']").width() - 17) + 'px';
//重置报表块宽度
$("div[widgetname='REPORT0']").css('width', wid);
//获取报表块高度
var height = ($("div[widgetname='REPORT0']").height() - 16) + 'px';
//重置报表块高度
$("div[widgetname='REPORT0']").css('height', height);
}, 1000);
注:由于设置了冻结标题行,会出现横向和纵向滚动条,所以js中重置了报表块的宽度和高度。根据实际情况隐藏相应的滚动条,纵向滚动条重置报表块宽度,横向滚动条重置报表块高度。
注:此方法仅适用于横向不需要滚动的情况,如果报表块列数太多导致横向出现滚动条,使用此方法则无法使用鼠标操作报表块横向滚动。
4. 预览效果编辑
4.1 PC端预览效果
4.2 移动端预览效果
注:不支持移动端。