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

1. 使用場景：平時在設定報表時，邊框（內容）顯示往往用來標註儲存格顯示區域，但是在列印時又不需要顯示出來。

2. 實現思路：可以透過新增載入結束 JS 事件來實現。

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

1

範例一。

1. 新建【資料庫查詢】，輸入SQL語句：SELECT * FROM [銷售總額]。設計範本樣式，選中A1:B2儲存格，將邊框全部設定為【無框線】。如下圖1所示。

2. 選擇【範本】→【範本Web屬性】→【填報頁面設定】。

   選擇【為該範本單獨設定】。

   事件設定選擇【載入結束】，輸入JS代碼如下代碼塊所示。操作如下圖2所示。

3. 儲存並點擊【填報預覽】，得到最終效果：預覽時給某一行某一欄儲存格新增邊框，列印時無邊框。以第 1 列第 1 欄為例。如下圖3所示。

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");  
}  

2

範例二。

1. 複用範例一中的範本，將上例中載入結束事件 JS 代碼修改，如下代碼塊所示。

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");  
        }   
}

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