首页 > Web开发 > 详细

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

时间:2015-10-17 11:55:05      阅读:374      评论:0      收藏:0      [点我收藏+]

在对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二次开发(隐藏下拉框控件的倒三角)

原文:http://www.cnblogs.com/ytwy/p/4887066.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!