JS實現自定義工具欄高度

1.1 預期效果

報表預覽時，工具欄高度是固定的，若需要自定義工具欄的高度，比如修改爲 40px，該如何實現？ 如下圖所示：

1.2 實現思路

在「填報頁面設置」中添加「加載結束」事件，利用 JS 控制工具欄的高度。

2.1 準備模板

準備一個模板。

2.2 添加事件

打開模板，點擊模板>模板 Web 屬性>填報預覽設置，選擇爲該模板單獨設置，添加一個加載結束事件，如下圖所示：

JavaScript 代碼如下：

//x-toolbar是工具欄所在的div class樣式
$(".x-toolbar").css({
"height":"40px",
      "background-size":"100% 110%",
      "border-bottom":"solid 1px #d0d0d0",
      "border-top":"solid 1px #d0d0d0"
    })
$(".x-toolbar table").attr("style","height:40px")
//窗口改變大小重新設置工具欄高度
$(window).resize(function() {
$(".x-toolbar").css({
"height":"40px",
      "background-size":"100% 110%",
      "border-bottom":"solid 1px #d0d0d0",
      "border-top":"solid 1px #d0d0d0"
    })
});
顯示代碼

2.3 效果預覽

保存模板，點擊「填報預覽」，效果如 1.1 節所示：

注：不支持移動端。

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具欄JS實例\08-JS實現自定義工具欄高度.cpt

點擊下載模板：08-JS實現自定義工具欄高度.cpt