finereport添加查询按钮控件（finereport控件设置）

一、问题描述FineReport能不能设置单选按钮组控件每个选项的颜色，而且每个颜色都不一样，这样使选项看起来更加美观，而且有层次感。

finereport控件设置

一、问题描述

最终效果如下：

二、解决思路

FineReport内置的单选按钮组控件并没有提供可以设置选项颜色的地方，因此，要改变颜色，就需要使用代码来修改。针对这个问题，可以有以下两种思路：

一是直接通过js初始化后事件，修改对应的对应选项的css属性。

二是直接对选项的显示值拼接HTML代码。

三、实现步骤

1）先创建一个单选按钮组控件

将控件的数据字典设置如下：

类型设置选择公式，实际值设置为：

range(3)+"#"

此时的预览效果如下，颜色单一不美观。

2）查看对应的HTML源码

预览报表页面之后，按下F12键，定位到单选按钮组控件的源码，如下，可见选项的文字与它前面的圆圈都在同一个span标签里面，这样如果通过js直接给这个span标签设置css属性，就达成不了我们想要的效果。需要另外做一些处理才行，这样相比另一种方式比较麻烦，因此我们放弃了通过js来实现的方法。

3）设置控件的显示值

显示值的公式如下，给选项拼接了span标签，并且设置标签的前景颜色为白色，背景颜色为红色：

"<span style='color:#fff;background-color:red'>" + $$ + "</span>"

此时预览的效果如下，：

初步的效果已经达成了，但是样式还是不太美观。第一背景颜色都一样，没能体现选项之间的层次感；第二背景颜色刚好包裹了文字，显得有点小家子气，不够大方得体；第三，背景块是方形的，有棱有角，显得难看。

下面一一来解决这些问题。

第一个问题，背景颜色一致，如何实现不同颜色呢。其实只要判断一下不同的选项拼接出不同的颜色即可。

第二个问题，背景太小。首先想到的是改变span标签的宽和高。但是span的宽度是不能直接改变的，需要先将span标签设置成block块，才能改变宽度。同时还要考虑一个问题，如果我们设置了span标签的宽度，结果选项里的文字长度超过了这个宽度怎么办？综合各种考虑之后，最终决定改变span的内边距padding属性来达到这个效果。

第三个问题，方块太难看，那就把它改成圆角。通过设置border-radius属性来达成这个效果。

最终将显示值的公式修改如下：

"<span style='color:#fff;padding:1px 5px;border-radius:10px;background-color:" + switch($$, "1#", "red", "2#", "#f5c13c", "3#", "green") + "'>" + $$ + "</span>"

此时预览效果如下，已经达成了最初想要的结果：

四、备注

版本信息：10.0.19(Build#persist-2022.06.10.10.03.23.562)

注意事项：控件显示值虽然拼接了HTML代码，但是不需要设置使用HTML来显示内容，也能实现效果。当然，如果设置了使用HTML来显示内容，也不会影响效果。

上面就是小居数码小编今天给大家介绍的关于（finereport控件设置）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• winform界面设计教程（winform界面控件）
• html设置单选按钮（html中单选按钮默认为选中）
• 怎么禁用单选按钮（jquery按钮禁用）
• 如何移除EXCEL菜单中最小、最大化和关闭按钮（vba窗体最小化按钮）

（483）个朋友认为回复得到帮助。