JS 实现报表块隐藏滚动条

  • 文档创建者:cherishdqy
  • 编辑次数:8次
  • 最近更新:Carly 于 2020-03-23
  • 1. 概述

    1.1 问题描述

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

    1.2 解决思路

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

    2. 示例

    2.1 模板设计

    2.1.1 新建决策报表

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

    1583742586281415.png

    2.1.2 新建数据集

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

    1583742214235828.png

    2.1.2 设计报表块

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

    1583742955191081.png

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

    1583743902850868.png

    2.2 添加初始化后事件

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

    1583745013898681.png

    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 预览效果

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

    222

    注:不支持移动端。

    3. 已完成模板

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

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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!