FineReport——JS二次开发（隐藏下拉框控件的倒三角）

在对FR控件进行二次开发的过程中，需要自定义样式，比如下拉框控件带有自动检索的功能，但是又希望它的显示样式如同文本框一样，这时就需要隐藏多余的部分。

在对在线文档的查阅中可以发现很多选择器适用于多种控件，所以事先通过FR提供的选择器进行更改css，但是，在测试的过程中，发现其对下拉框根本不管用，只对文本框可用（其实对更改样式并不难，只需要在浏览器中审查元素，就可以明白对于控件的选择器名称，然后再对其样式进行更改）。

对于选择器.fr-texteditor:

两种方式导入CSS，通过外部文件引入，或者在页面初始化时添加JS设置其CSS。

引入如下css样式（导入外部css文件模式）：

.fr-texteditor{

    border:3px solid blue;

    color:red;

    font-weight:bold;}

显示效果：

关于隐藏下拉控件倒三角，在填报预览初始化事件中添加如下JS（添加内部css文件）：

$(".fr-trigger-btn-up").hide();

$(".fr-trigger-btn-down").hide();

$(".fr-trigger-btn-over").hide();

$(".fr-trigger-center").hide();

//$(".fr-trigger-texteditor").removeAttr("width");

//$(".fr-trigger-texte").removeAttr("width");

//$(".fr-trigger-editor ui-state-enabled").removeAttr("width");

var wid=$(".fr-trigger-editor").width();

$(".fr-trigger-text").width(wid);

$(".fr-trigger-texteditor").width(wid);

上面部分的意思是将倒三角部分隐藏，下面部分表示将文本框的宽度设置为何下拉框控件整个宽度一致，不然控件会留有一小块空白区域。

显示效果如下：

总结：

通过审查元素，可以随便更改控件以及单元格样式，在模板中，FR提供了通过单元格定位的功能，这样就可以只对特定的单元格进行更改。

巴特西

FineReport——JS二次开发（隐藏下拉框控件的倒三角）

最新文章

热门文章