1. 概述
1.1 问题描述
普通报表中,如果报表显示位置为「居中」,且报表中存在「冻结」,则预览模板时存在黑色边框,滚动条不靠边显示,如下图所示:
1.2 解决思路
添加加载结束事件,通过 JavaScript 代码实现隐藏黑色边框,调整滚动条位置。
2. 示例一
2.1 设置报表显示位置
打开一张既存在「冻结」又「居中显示」的模板,点击菜单「模板>模板Web属性>分页预览」,设置报表显示位置为「左展示」,如下图所示:
2.2 设置加载结束事件
点击菜单「模板>模板Web属性>分页预览」,添加「加载结束事件」,添加 JavaScript 代码,如下图所示:
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 效果预览
保存模板,点击「分页预览」,模板将「居中展示」,且不会出现黑色边框,效果如下图所示:
注:不支持移动端。
3. 示例二
3.1 设置报表显示位置
打开模板,点击菜单「模板>模板Web属性>分页预览」,设置报表显示位置为「居中展示」,如下图所示:
3.2 设置加载结束事件
点击菜单「模板>模板Web属性>分页预览」,添加「加载结束事件」,添加 JavaScript 代码,如下图所示:
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