帆软按钮图标替换

CLC鸿

已于 2022-10-25 16:00:12 修改

阅读量1.2k

点赞数

分类专栏： FineReport 文章标签： css 前端 html

于 2022-10-25 15:57:01 首次发布

本文链接：https://blog.csdn.net/weixin_44310844/article/details/127514910

版权

FineReport 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

帆软默认的按钮控件的格式见下图：
在这里插入图片描述
有时候为了报表的感观，会修改其背景色、边框、图标等等。
修改背景色和边框相对简单一点，修改图标的话需要将图片加载到服务器上面。
方法：
1）将自定义图片放在服务器上，图片命名为xl.png，路径可以自定义，此处放在：webapps\webroot\help\picture
2）然后帆软设计器选中按钮添加初始化事件，添加下面的js脚本

setTimeout(function(){        
        $(".fr-texteditor").css("border","none");//去除边框
        $(".fr-trigger-text").css("border","none");//去除边框
        $(".fr-trigger-btn-up").css({"border":"none","background":"rgba(255,255,255)"});//设置控件右侧点击按钮，无边框，背景色为白色
      $('.fr-trigger-center').css({'background': 'url(/webroot/help/picture/xl.png)no-repeat','background-size':'85% 135%'});//设置控件右侧点击按钮的图标为自定义图片的路径，background-size参数调整图片大小
},100)

修改后按钮控件显示如下图：
在这里插入图片描述
3）服务器上已经保存了图片，但是无法加载出图片，要检查一下，图片是否可以在网页中查看，如果不能网页查看，说明没有成功加载到服务器，需要重启服务器
参考网址：https://localhost:端口号/webroot/help/picture/xl.png