反馈已提交

网络繁忙

JS实现报表冻结标题居中显示无黑框

  • 文档创建者:用户XwfE83958
  • 历史版本:22
  • 最近更新:Carly 于 2022-08-15
  • 1. 概述

    1.1 问题描述

    普通报表中,如果报表显示位置为「居中」,且报表中存在「冻结」,则预览模板时存在黑色边框,滚动条不靠边显示,如下图所示:

    image.png

    1.2 解决思路

    添加加载结束事件,通过 JavaScript 代码实现隐藏黑色边框,调整滚动条位置。

    2. 示例一

    2.1 设置报表显示位置

    打开一张既存在「冻结」又「居中显示」的模板,点击菜单「模板>模板Web属性>分页预览」,设置报表显示位置为「左展示」,如下图所示:

    2.2 设置加载结束事件

    点击菜单「模板>模板Web属性>分页预览」,添加「加载结束事件」,添加 JavaScript 代码,如下图所示:

    1.png

    JavaScript 代码如下:

    var wrap = $('.reportPane');
    var body = $('.page-block');
    var dif = (wrap.width() - body.width()) / 2;
    if(dif<0) dif=0;//如果页面宽度超过显示框架宽度,则居左显示

    body[0].parentElement.style.left = 0;

    body.css({'margin-left': dif});//居中
    var center = $('.frozen-center');
    var west = $('.frozen-west');
    if (center.children().width() < center.width()) {
        west.css('overflow-x', 'auto');
        center.css('overflow-x', 'auto');
    }//去除横向滚动条

    2.3 效果预览

    保存模板,点击「分页预览」,模板将「居中展示」,且不会出现黑色边框,效果如下图所示:

    image.png

    注:不支持移动端。

    3. 示例二

    3.1 设置报表显示位置

    打开模板,点击菜单「模板>模板Web属性>分页预览」,设置报表显示位置为「居中展示」,如下图所示:

    3.2 设置加载结束事件

    点击菜单「模板>模板Web属性>分页预览」,添加「加载结束事件」,添加 JavaScript 代码,如下图所示:

    1.png

    JavaScript 代码如下:

    setTimeout(
    function() 
    {
    $('.main-content-center').css({"border":"0px"});  // 去掉无黑框
    $('.frozen-center').css({"overflow":"auto"})
    $('.frozen-north').css({"overflow":"auto"})// 当页面内容超出时显示滚动条
    }
    , 10)

    3.3 效果预览

    保存模板,点击「分页预览」,模板将「居中展示」,且不会出现黑色边框,效果如下图所示:

    注1:翻页时,存在短暂边框效果,不影响正常使用。此方法无法调整滚动条显示位置。

    注2:不支持移动端。

    4. 已完成模板

    1)示例一:

    已完成模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现去除报表居中、冻结标题时的黑框.cpt

    点击下载模板:JS实现去除报表居中、冻结标题时的黑框(一).cpt

    2)示例二

    已完成模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现去除报表居中、冻结标题时的黑框(二).cpt

    点击下载模板:JS实现去除报表居中、冻结标题时的黑框(二).cpt


    附件列表


    主题: 报表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭



    AI

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