JS 實現動態選擇報表背景色

1.1 預期效果

報表開發中，為提升報表美觀度，可以使用 JS 實現報表背景色的動態切換。如下圖所示：

1.2 實現思路

報表設計時，在參數面板新增按鈕元件， 給按鈕新增 JS 點選事件實現報表背景色動態切換。

2.1 準備範本

點選下載範本：決策報表入門範例.frm

開啟範本，範本樣式如下圖所示：

2.2 新增按鈕

將「查詢元件」往左邊拖曳，參數面板右側插入如下圖所示的「標籤元件」和「按鈕元件」並修改元件名。如下圖所示：

2.3 新增事件

分別為五個「按鈕元件」新增「點選」事件，以蔚蓝色為例，選中第二個按鈕，右下角屬性面板給按鈕新增一個「點選」事件。如下圖所示：

JavaScript 程式碼如下：

注：程式碼中的 LavenderBlush 為紫紅色，其他按鈕只需要修改此處的顏色程式碼即可。例如：設定紅色按鈕，只需要複製此程式碼，將 LavenderBlush 改為 Red。

setTimeout(function() {
    $(".content-container").css("background-color", "LavenderBlush");
}, 100);

2.4 效果預覽

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

注：不支援行動端 。

點選下載範本：JS 實現動態改變報表背景色.frm