隱藏參數面板的小箭頭

1.1 版本

1.2 預期效果

當報表中有參數面板時，參數面板預設都會有小箭頭，如果需要參數面板和報表主體美觀銜接，就需要隱藏參數介面與報表主體交接處的三角箭頭。如下圖所示：

1.3 實現思路

在範本載入結束後，透過JS獲取到參數面板小箭頭的 DOM 元素，然後設定其隱藏，或直接去掉。

1）隱藏按鈕

$('.parameter-container-collapseimg-up').hide();
//FR11樣式下可用$(".x-icon.b-font.horizon-center.display-block.report-main-parameter-container-collapseimg-up").hide()

2）刪除按鈕

$('.parameter-container-collapseimg-up').remove();
//FR11樣式下可用$(".x-icon.b-font.horizon-center.display-block.report-main-parameter-container-collapseimg-up").remove()

注：不支援行動端。

注：不支援決策報表。

2.1 準備範本

建立普通報表範本，為了使參數面板顯示，在參數面板中隨意新增兩個元件。如下圖所示：

2.2 新增事件

點選參數面板編輯介面，右側「組件設定」處選中 para，在「事件」處為其新增一個「初始化後」事件。如下圖所示：

參數面板新樣式 為 經典 樣式的 JavaScript 程式碼如下:

//延遲執行
setTimeout(function() {
   //隱藏參數面板小箭頭
   $('.parameter-container-collapseimg-up').hide();  
}, 10);  
//刪除參數面板小箭頭
//$('.parameter-container-collapseimg-up').remove();  

參數面板新樣式 為 FR11 樣式的 JavaScript 程式碼如下:

//延遲執行
setTimeout(function() {
   //隱藏參數面板小箭頭
   $('.report-main-parameter-container-resizable').hide();  
}, 10);  
//刪除參數面板小箭頭
//$('.report-main-parameter-container-resizable').remove();  

注：使用中因為安裝了插件等因素使得前端變化導致 DOM 元素失效的，可參考以下方法修改。

預覽報表，然後按 F12 或者找到瀏覽器的開發人員選項，然後使用尋找元素選擇三角按鈕，查看其中 class 屬性值。如下圖所示：

2.3 效果預覽

儲存範本，點選「分頁預覽」。效果如下圖所示：

注：不支援行動端。

點選下載範本：

透過JS隱藏參數面板小箭頭.cpt