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\doc\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。

移動端不支持各種打印和導出方式