【表单JS实例】JS实现控件融入背景

1. 概述
1.1 预期效果

决策报表深色背景下，控件原本的白色显得很刺眼，如下图所示：

如何将控件背景修改成与主体背景颜色一致呢，效果如下图所示：

1.2 实现思路

使用 JS 获取主体背景颜色，然后修改控件背景，以及其他控件属性。

2. 示例

2.1 报表设计

1）新建一个决策报表，设置 body 布局方式为绝对布局，如下图所示：

2）如下图依次添加下拉单选控件，日期控件，文本控件，数字控件和按钮控件，并给控件设置默认值。

3）日期控件需要取消勾选允许直接编辑，否则直接编辑日期控件内容时，会出现白色背景色。

4）按钮控件自定义背景，初始背景颜色设置为透明，如下图所示：

5）选中 body 添加初始化后事件，如下图所示：

JavaScript 代码如下：

1. setTimeout(function(){        
   
2.         
   
3.         //以下修改文本控件、数字控件的属性        
   
4.         $(".fr-texteditor").css({"background":"rgba(0,0,0,0)","color":"#c0c0c0"});//设置背景和字体颜色
   
5.         $(".fr-texteditor").css("border","none");//去除边框
   
6. 
   
7.         //以下修改下拉单选控件，下拉复选控件和日期控件的属性
   
8.         $(".fr-trigger-text.fr-border-box").css({"background":"rgba(0,0,0,0)"});//设置控件本身背景
   
9.         $(".fr-trigger-text").find("input").css({"background":"rgba(0,0,0,0)","color":"#c0c0c0"});//设置控件输入框背景和字体颜色
   
10.         $(".fr-trigger-text").css("border","none");//去除边框
    
11.       $(".fr-trigger-btn-up").css({"background":"rgba(0,0,0,0)","border":"none"});//设置控件右侧点击按钮        
    
12. },100)        

复制代码

2.2 效果预览

保存报表，点击表单预览，效果如下图所示：

注：不支持移动端。

注：预览时，若控件出现如下白底效应，说明报表工程 JAR 包版本较低，可通过升级实现预期效果。

3. 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\JS实现控件融入背景.frm

模板下载见附件

赞，很实用

但是背景色是白色的时候  怎么把下拉框的倒三角符号设置成黑色nei

实用66

安装了新适应插件 不适用

好像FineReport 11不支持，我找到另一种办法，首先查看一下日期控件的代码（搜狗浏览器选中日期控件右键查看属性）：

其中的这一句就是div每个自定义组件特有的属性，即控件名称。我们使用Jquery代码通过某个属性名称也可以获取到该元素对象。

既然可以找到日期控件元素，我们就可以把代码修改为（在上面博主的基础上新增该代码即可）：

$("div[widgetname*='SDATE']") .css({

"background": "rgba(0,0,0,0)",

"color": "#c0c0c0"

}); //设置背景和字体颜色

$("div[widgetname*='SDATE']") .css("border", "none"); //去除边框

其中“SDATE”是日期的控件名：

效果：

FineReport 11之后，代码可以这样写：

//修改日期控件背景
        $("div[widgetname*='SDATE']") .css({
                "background": "rgba(0,0,0,0)",
                "color": "#c0c0c0"
        }); //设置背景和字体颜色
$("div[widgetname*='SDATE']") .css("border", "none"); //去除边框
$(".bi-focus-shadow") .css("border", "none"); //去除官方的控件阴影

其中“SDATE”是日期控件的控件名称。

感谢分享。

没有模板，根据代码设置好像没实现

附件在哪啊宝  找不到

有用！

有10以上版本的吗

感謝, 11 可以用

移动端怎么实现这个功能呢  这个js不适用于移动端