JS實現報表在數據分析模式下居中顯示

1.1 問題描述

「分頁預覽」和「填報預覽」均有報表顯示位置設置項。而數據分析模式預覽，沒有報表居中顯示功能，默認都是靠左顯示的。如果以「數據分析」模式預覽報表，如何設置報表居中顯示呢？如下圖所示：

1.2 實現思路

在數據分析模式，通過給報表添加「加載結束 」JS 事件，來實現報表居中。

2.1 準備模板

打開内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\OrderReport\Order_5.cpt

點擊可下載模板：Order_5.cpt

2.2 添加事件

點擊模板>模板 Web 屬性>數據分析設置，選擇爲該模板單獨設置，在事件設置中添加一個加載結束事件。如下圖所示

JavaScript 代碼如下：

ms = $('.html-content').length;//判斷是否爲多sheet
if (ms != 0){
//多sheet
ff=$(".frozen-table",$('.html-content:visible')).length//判斷當前sheet是否有凍結
if (ff == 0) {
//未凍結
var slmargin = ($(".content-container").width()-$(".sheet-container div:first-child",$('.html-content:visible')).width())/2;
if (slmargin > 0) {
$('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin); 
//$(".x-table",$('.html-content:visible')).css('left',slmargin);
$(window).resize();
}
}
else {
//凍結
var slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center'),$('.html-content:visible')).width()-$('.x-table',$('#frozen-west'),$('.html-content:visible')).width())/2;
if (slmargin > 0) {
$('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin);
$(window).resize();
}
}
}
else {
ff=$(".frozen-table").length//判斷當前sheet是否有凍結
//單sheet
if (ff == 0) {
//未凍結
slmargin = ($(".content-container").width() - $(".sheet-container div:first-child").width()) /2;
if (slmargin > 0) {
$('.sheet-container').css('margin-left',slmargin); 
//$(".x-table").css('left',slmargin);
$(window).resize();
}
}
else {
//凍結
slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center')).width()-$('.x-table',$('#frozen-west')).width())/2;
if (slmargin > 0) {
$('.sheet-container').css('margin-left',slmargin); 
$(window).resize();}
}
}
顯示代碼

2.3 效果預覽

保存模板，點擊數據分析，效果如下所示：

注：不支持移動端。

已完成的模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\數據分析JS實例\01-JS實現報表在數據分析模式下居中顯示.cpt

點擊下載模板：01-JS實現報表在數據分析模式下居中顯示.cpt

對於老版本的 JAR 包，上述 JavaScript 代碼并不适用，需要修改下代碼：

ms = $('.html-content').length;//判斷是否爲多sheet
if (ms != 0){
//多sheet
ff=$(".frozen-table",$('.html-content:visible')).length//判斷當前sheet是否有凍結
if (ff == 0) {
//未凍結
var slmargin = ($(".content-container").width()-$(".sheet-container div:first-child",$('.html-content:visible')).width())/2;
if (slmargin > 0) {
$('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin); 
$(".x-table",$('.html-content:visible')).css('left',slmargin);
$(window).resize();
}
}
else {
//凍結
var slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center'),$('.html-content:visible')).width()-$('.x-table',$('#frozen-west'),$('.html-content:visible')).width())/2;
if (slmargin > 0) {
$('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin);
$(window).resize();
}
}
}
else {
ff=$(".frozen-table").length//判斷當前sheet是否有凍結
//單sheet
if (ff == 0) {
//未凍結
slmargin = ($(".content-container").width() - $(".sheet-container div:first-child").width()) /2;
if (slmargin > 0) {
$('.sheet-container').css('margin-left',slmargin); 
$(".x-table").css('left',slmargin);
$(window).resize();
}
}
else {
//凍結
slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center')).width()-$('.x-table',$('#frozen-west')).width())/2;
if (slmargin > 0) {
$('.sheet-container').css('margin-left',slmargin); 
$(window).resize();}
}
}
顯示代碼