反馈已提交

网络繁忙

JS隐藏报表块滚动条

  • 文档创建者:cherishdqy
  • 历史版本:10
  • 最近更新:Fay 于 2023-01-13
  • 1. 概述

    1.1 问题描述

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

    1.2 解决思路

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

    2. 示例

    2.1 模板设计

    2.1.1 新建决策报表

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

    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

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持