JS初始化按钮颜色，点击后变色

1. 概述
1.1 问题描述

我们知道，利用 控件 CSS 或 按钮 CSS 可以修改整个模板中某种控件的 CSS 样式，即使这里面没有你需要的，现在基本所有新的浏览器都有调试功能，按 F12,找到控件相应的 CSS 代码，再用 JS 修改下就行了。

但是在有些需求下，模板中出现多个按钮，而我们需要的并不是仅仅统一修改样式，需要的是在初始化后统一出现一种样式，而点击后出现另一种样式，再次点击后又恢复成原来的样式，这样我们以前所使用的修改 CSS 样式的方法就不再适用，比如想实现下图中的效果，用统一修改就没办法实现了，那么，如何实现呢？

1.2 实现思路

给按钮添加点击事件修改控件颜色

2. 示例
2.1 制作模板

添加内置数据集，如下图所示：

把内置数据集第 1 列拖动到 A1 单元格，B1 单元格为按钮控件，按钮控件的名称为 失效。模板设计如下图所示：

B1中按钮控件的设置如下：

2.2 按钮初始化后的统一样式

修改统一样式比较简单，只需要在模板加载结束后事件里面写修改 CSS 的代码就行了。

比如我们要初始化时显示灰色，打开菜单>模板>模板 Web 属性>填报页面设置，添加加载结束事件，如下图所示：

加载结束事件的 JS 代码如下：

1. $('.fr-btn-up#fr-btn-').each(function(){
   
2. if($(this).closest('td').attr('col')=='1')
   
3. {
   
4. $(this).css('background-color','gray');
   
5. }
   
6. })

复制代码

2.3 点击后修改单个按钮的样式

按钮文字为失效时，再点击变成生效，并且背景色变成红色。右击 B1 单元格，弹出控件设置对话框，添加点击事件，如下图所示：

代码如下：

1. if(this.getValue()=='失效'){
   
2. this.setValue('生效');
   
3. this.$btn.closest('#fr-btn-').css('background-color','red');//换背景色
   
4. this.$btn.closest('#fr-btn-').css('background-image','url()');//换背景图片，自己填写url地址
   
5. } else {
   
6. this.setValue('失效');
   
7. this.$btn.closest('#fr-btn-').css('background-color','gray');//背景色为灰色
   
8. this.$btn.closest('#fr-btn-').css('background-image','url()');//清除背景图片
   
9. }

复制代码

利用此方法同样可以实现其他控件单独变色，并且代码中提供了更换背景图片的功能，只需要填上图片地址就行了。

2.4 预览效果

保存模板，选择填报预览，实现效果下图所示：

注：此 JS 不支持移动端使用

3. 模板下载

已完成的模板请参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\26-JS初始化按钮颜色，点击后变色.cpt

点击下载模板：26-JS初始化按钮颜色，点击后变色.cpt