历史版本11 :JS实现FVS隐藏表格组件滚动条 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 问题描述

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

1.2 解决思路

可以使用官方接口,将滚动条隐藏。详情请参见:隐藏滚动条接口 。

2. 示例编辑

2.1 模板设计

2.1.1 新建决策报表

新建决策报表,点击「模板>PC端自适应属性」, 设置布局方式为「绝对布局」,报表缩放设置为「不自适应」,设置方式为「为该模版单独设置」,选择「不自适应」,如下图所示:

1.png

2.1.2 新建数据集

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

2.png

2.1.2 设计报表块

1)在决策报表中插入「报表块」,报表块设计如下图所示:

2.5.png

2)点击工具栏中的「冻结」,在「重复与冻结设置」中,设置1行为「重复标题行」,并冻结第 1,如下图所示:

3.png

2.2 添加初始化后事件

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

4.png

隐藏纵向滚动条的 JavaScript 代码如下:

setTimeout(function(){
     _g().getWidgetByName('report0').setVScrollBarVisible(false);
}, 500);

注1:代码添加在「初始化后」事件中时,建议添加一个延迟函数,否则可能会因为报表块对象没有完全创建而发生错误。

注2:若要隐藏 横向滚动条 代码为:setHScrollBarVisible ,隐藏后报表不会跟随鼠标滚轮滚动。

2.3 预览效果

保存模板,点击「分页预览」,效果如下图所示:

5.gif

注:不支持移动端。

3. 模板下载编辑