JS 实现报表块隐藏滚动条

编辑
  • 文档创建者:cherishdqy
  • 浏览次数:9548次
  • 编辑次数:3次
  • 最近更新:Kevin-s 于 2019-06-23
  • 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 移动端预览效果

    注:不支持移动端。


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]