JS實現自訂工具欄高度

1.1 版本

1.1 預期效果

報表預覽時，工具欄高度是固定的，若需要自訂工具欄的高度，例如自訂工具欄長 300 ，高 100，如下圖所示：

1.2 實現思路

在「範本 Web 屬性>分頁預覽設定」中新增「載入結束」事件，利用 JS 控制工具欄的高度。

2.1 準備範本

準備一個空白範本。

2.2 新增事件

開啟範本，點選「範本>範本 Web 屬性>分頁預覽設定」，選擇為「該範本單獨設定」，新增一個「載入結束」事件，如下圖所示：

JavaScript 程式碼如下：

_g().getToolbar().setStyle({
    width: 300,
    height: 100
});

若出現由於工具欄高度增加，頁面整體下移將原本頁面上最下面一列的資料會被擋住的情況，可使用如下程式碼：

_g().getToolbar().setStyle(

{ height: 50, width: 100 }
);
$(window).trigger('resize');
_g().getToolbar().setStyle(

{ height: 50, width: 100 }
);

2.3 效果預覽

儲存範本，點選「分頁預覽」，效果如 1.2 節所示。

注：不支援行動端。

點選下載範本：08-JS實現自訂工具欄高度.cpt