JS隱藏報表塊捲軸

1.1 問題描述

當報表塊內容略多時，會出現捲軸，如何隱藏不美觀的捲軸，且可以透過滑鼠滾輪上下捲動內容呢？

1.2 解決思路

可以使用官方API，將捲軸隱藏。詳情請參見：隱藏捲軸API 。

2.1 範本設計

2.1.1 建立決策報表

建立決策報表，點選「範本>PC端自適應屬性」， 設定佈局方式為「絕對佈局」，報表縮放設定為「不自適應」，設定方式為「為該模版單獨設定」，選擇「不自適應」，如下圖所示：

2.1.2 建立資料集

建立資料集 ds1：SELECT * FROM 銷量，如下圖所示：

2.1.2 設計報表塊

1）在決策報表中插入「報表塊」，報表塊設計如下圖所示：

2）點選工具欄中的「凍結」，在「重複與凍結設定」中，設定第 1行為「重複標題行」，並凍結第 1 行，如下圖所示：

2.2 新增初始化後事件

傳回決策報表主體，選中報表塊 report0，新增「初始化後事件」，輸入 JavaScript 腳本，如下圖所示：

隱藏縱向捲軸的 JavaScript 程式碼如下：

setTimeout(function(){
     _g().getWidgetByName('report0').setVScrollBarVisible(false);
}, 500);

注1：程式碼新增在「初始化後」事件中時，建議新增一個延遲函式，否則可能會因為報表塊物件沒有完全建立而發生錯誤。

注2：若要隱藏橫向捲軸將API更換為 setHScrollBarVisible ，隱藏後報表不會跟隨滑鼠滾輪捲動。

2.3 預覽效果

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

注：不支援行動端。

點選下載範本：

JS隱藏報表塊捲軸.frm