|
1.背景及说明
1.1 背景
随着新自适应的插件和FineReport11.0的深度使用，修改新自适应控件的样式的需求也来了，原本的修改的js也不在适用。
1.2 说明
本文针对新自适应控件属性修改，老自适应修改可以参考文档【表单JS实例】JS实现控件融入背景；文档内容来自官方文档&问答平台&自己百度、class获取及测试，真实有效！！！
2.实现思路
因为部分用户服务器对文件上传限制比较严格【我就是】，本文主要通过 JS 的方式进行实现
3.实现
3.1 修改控件的背景、边框、字体
修改前效果
修改后效果
 
JavaScript 代码如下【添加位置：body》初始化事件】：
setTimeout(function() {
$(".bi-card").css({'background-color':'#222629'});//修改控件的底层背景色
$(".bi-border").css({'border':'1px solid #4c4c4c'}); //修改控件边框
$(".bi-text").css({'color':'#fdfdfd'}); //修改控件文本颜色
$(".bi-input").css({'color':'#fdfdfd'}); //修改文本控件文本颜色
}, 200)
3.2 修改控件下拉列表的背景和字体颜色
修改前效果
修改后效果
JavaScript 代码如下【添加位置：body》初始化事件】：
setTimeout(function() {
//修改下拉列表的背景及字体颜色
$(".bi-v.list-view-outer.list-view-shadow").css({"background-color":"#161a1d","color":"#fdfdfd"});
}, 200)
3.3 要求只修改部分控件属性
JavaScript 代码如下【添加位置：body》初始化事件】：
//在元素前添加ID--div[widgetname='COMPANY_NAME1']即可，其中元素和ID内的引号需不一致【单引号或者多引号，否则识别有误】，同时ID对应控件的名称，需要大写
$("div[widgetname='COMPANY_NAME1'].bi-v.list-view-outer.list-view-shadow").css({"background-color":"#161a1d","color":"#fdfdfd"})
3.4 更换下拉框的背景为图片
此处有两个方案：
①直接JS引用图片为边框背景即可
JavaScript 代码如下【添加位置：body》初始化事件】：
其中URL为路径，可以直接用网页图片URL也可以使用本地图片，用相对路径，放在webroot下即可
setTimeout(function() {
//修改控件的底层背景图片；no-repeat指图片不重复;cover指全适应展开
$("div[widgetname='COMPANY_NAME1'].bi-card").css({"background":"url('/webroot/help/picture/xlk.png') no-repeat",'background-size': 'cover'});
//隐藏边框
$(".bi-border").css({'border':'none'});
//更换下拉框箭头的背景，margin-top指距离顶部位置；background-size为图片尺寸；objectFit为自适应；backgroundRepeat为重复属性
$('.bi-basic-button.cursor-pointer.bi-icon-button.horizon-center.bi-trigger-icon-button.overflow-hidden.pull-down-font.trigger-icon-button').css({
'height': '10px',
'margin-top': '10px',
'background-image': "url('/webroot/help/picture/xial.png ')",
'background-size': '12px 12px',
'objectFit': "cover",
'backgroundRepeat':"no-repeat",
});
}, 200)
②直接去掉边框和背景色，在加个报表块重叠即可
隐藏和去掉背景色JS
setTimeout(function() {
$("div[widgetname='ORGANIZATION1'].bi-card").css({"background":'none'});
$("div[widgetname='ORGANIZATION1'.bi-border").css({'border':'none'});
}, 200)
3.5 备注说明
①如果js没有生效，可以将时延时间增长，再行测试
②如果还是没有生效，可将setTimeout改为setInterval，两者区别查看文档 setTimeout与setInterval的区别
③以上为部分属性，更多新自适应性控件属性修改查看文档 互助文档
最后，文档不完善或者有遗漏的地方欢迎各位大佬补充~~
| 
来自 2#