JS實現報表凍結標題置中顯示無黑框

1.1 問題描述

普通報表中，如果報表顯示位置為「置中」，且報表中存在「凍結」，則預覽範本時存在黑色邊框，捲軸不靠邊顯示，如下圖所示：

1.2 解決思路

新增載入結束事件，透過 JavaScript 程式碼實現隱藏黑色邊框，調整捲軸位置。

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.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：不支援行動端。

1）範例一：

已完成範本請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\JS\分頁預覽JS實體\JS實現去除報表置中、凍結標題時的黑框.cpt

點選下載範本：JS實現去除報表置中、凍結標題時的黑框（一）.cpt

2）範例二

已完成範本請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\JS\分頁預覽JS實體\JS實現去除報表置中、凍結標題時的黑框（二）.cpt

點選下載範本：JS實現去除報表置中、凍結標題時的黑框（二）.cpt