JS 实现动态选择报表背景色

1.1 预期效果

报表开发中，为提升报表美观度，可以使用 JS 实现报表背景色的动态切换。如下图所示：

1.2 实现思路

报表设计时，在参数面板添加按钮控件， 给按钮添加 JS 点击事件实现报表背景色动态切换。

2.1 准备模板

准备内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm

点击下载模板：决策报表入门示例.frm

打开模板，模板样式如下图所示：

2.2 添加按钮

将「查询控件」往左边拖拽，参数面板右侧插入如下图所示的「标签控件」和「按钮控件」并修改控件名。如下图所示：

2.3 添加事件

分别为五个「按钮控件」添加「点击」事件，以淡紫红为例，选中第五个按钮，右下角属性面板给按钮添加一个「点击」事件。如下图所示：

JavaScript 代码如下：

注：代码中的 LavenderBlush 为紫红色，其他按钮只需要修改此处的颜色代码即可。例如：设置红色按钮，只需要复制此代码，将 LavenderBlush 改为 Red。

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

2.4 效果预览

保存模板，点击「分页预览」，预览效果如下图所示：

注：不支持移动端 。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\JS 实现动态改变报表背景色.frm

点击下载模板：JS 实现动态改变报表背景色.frm