JS实现去除报表居中、冻结标题时的黑框

  • 文档创建者:幽冥猫儿
  • 编辑次数:11次
  • 最近更新:Carly 于 2020-06-16
  • 1. 概述

    1.1 问题描述

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

    image.png

    1.2 解决思路

    添加加载结束事件,通过 JavaScript 代码实现隐藏黑色边框。

    2. 示例

    2.1 设置报表显示位置

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

    2020-06-16_14-03-28.png

    2.2 设置加载结束事件

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

    2020-06-12_15-02-03.png

    JavaScript 代码如下:

    var wrap = $('.reportPane');
    var body = $('.page-block');
    var dif = (wrap.width() - body.width()) / 2;
    if(dif<0) dif=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. 已完成模板

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

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

    附件列表


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