历史版本11 :JS实现报表冻结标题居中显示无黑框 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

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