JS實現預覽時有邊框，列印時無邊框效果

平時在設定報表時，邊框（內容）顯示往往用來標註儲存格顯示區域，但是在列印時又不需要顯示出來，如果遇見這種需求我們該任何處理呢…？這篇文檔提供一個預覽時顯示邊框，列印時不顯示邊框（內容）的解決方案。

圖例1：

圖例二：

我們可以透過新增載入結束 JS 事件來實現！

範例 1 腳本：

var tr = $("tr", $('div.content-container'));  
for(var i=0;i<tr.length;i++){  
    var td=tr.eq(i).children().eq(0);  
    td.removeClass("b0");  
    td.addClass("b1");  
    }  
for(var j=0;j<tr.eq(0).children().length;j++){  
    var td = tr.eq(0).children().eq(j);  
    td.removeClass("b0");  
    td.addClass("b1");  
    }
範例2腳本：
var tr = $("tr", $('div.content-container')); 
for(var i=0;i<tr.length;i++)
{
     for(var j=0;j<tr.eq(i).children().length;j++) 
     {
     //獲取td元素，也就是頁面上的儲存格 
       var td = tr.eq(i).children().eq(j);
       td.removeClass("b0"); td.addClass("b1");
     }
 }
显示代码

注：因為邊框是在頁面載入之後才‘畫’上去的，而列印部分內容是列印頁面載入初的內容。

3.1 範例一

最終效果：預覽時給某一列某一欄內容儲存格新增邊框，列印時無邊框！以第 1 列第 1 欄為例：

1）開啟範本 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\form\簡單填報範例.cpt ， 選中內容儲存格，將邊框全部設定為“無”。

2）選擇範本>範本 Web 屬性>填報頁面設定，為該範本單獨設定-事件設定（載入結束），如下圖所示：

JS 程式碼如下：

var tr = $("tr", $('div.content-container'));  
for(var i=0;i<tr.length;i++){  
        //獲取td元素，也就是頁面上的儲存格，這邊獲取的是第一欄  
        var td=tr.eq(i).children().eq(0);  
        td.removeClass("b0");  
        td.addClass("b1");  
        }  
for(var j=0;j<tr.eq(0).children().length;j++){  
        //獲取td元素，也就是頁面上的儲存格，這邊獲取的是第一列  
        var td = tr.eq(0).children().eq(j);  
        td.removeClass("b0");  
        td.addClass("b1");  
        }  
显示代码

3）儲存並預覽，以填報方式開啟並列印，效果見上圖1。

3.2 範例二

最終效果：預覽時給所有內容儲存格新增邊框，列印時無邊框！

1）同上，將上例中載入結束事件 JS 程式碼修改為：

var tr = $("tr", $('div.content-container'));  
for(var i=0;i<tr.length;i++){  
         for(var j=0;j<tr.eq(i).children().length;j++)
         {  
        //獲取td元素，也就是頁面上的儲存格
        var td = tr.eq(i).children().eq(j);  
        td.removeClass("b0");  
        td.addClass("b1");  
        }   
        }
显示代码

2）儲存並預覽，以填報方式開啟並列印，效果見上圖 2。

行動端不支援各種列印和匯出方式