JS實現去除資料分析頁面被選儲存格時的黑色邊框

1.1 問題描述

使用「資料分析」預覽範本時，被選儲存格會看到一個黑色的邊框，會影響到整個頁面的美觀，那麼該如何將這個邊框去除呢？

如果是填報預覽想去除黑框，請參見文檔：去除資料分析頁面被選儲存格時的黑色邊框

1.2 實現思路

• 方法一：給資料分析設定頁面新增載入結束事件，使用去除邊框程式碼實現。
  

• 方法二：預覽後獲取邊框元素，再使用程式碼改變邊框效果，同樣新增載入結束事件實現。

• 方法三：不去除被選儲存格時出現的黑框，直接修改這個邊框的顏色，讓樣式美觀即可。

2.1 方法一：去除邊框程式碼

1）開啟設計器，選中需要編輯的範本，點選「範本>範本 Web 屬性>資料分析設定」，新增一個「載入結束」事件，如下圖所示：

JavaScript 程式碼如下：

_g().curLGP.hideSelectFrame();

2.2 方法二：獲取邊框元素

1）資料分析預覽報表頁面，透過「F12」被選儲存格，找到邊框對應的元素，如下圖所示：

2）點選「範本>範本 Web 屬性>資料分析設定」，新增「載入結束」事件，如下圖所示：

JavaScript 程式碼如下：

$('.fDright').removeClass('fDright'); 
$('.fDbottom').removeClass('fDbottom'); 
$('.fDtop').removeClass('fDtop'); 
$('.fDleft').removeClass('fDleft');

2.3 方法三：自訂邊框色

1）給儲存格邊框自訂顏色，點選「範本>範本 Web 屬性>資料分析設定」，新增「載入結束」事件，如下圖所示：

JavaScript 程式碼如下：

$('.fDright').css('background', 'red'); 
$('.fDbottom').css('background', 'yellow');
$('.fDtop').css('background', 'blue'); 
$('.fDleft').css('background', 'gleen');

2）預覽效果如下圖所示：

點選下載範本：

去除被選儲存格時的黑色邊框1.cpt

去除被選儲存格時的黑色邊框2.cpt

自訂被選儲存格時邊框色.cpt