JS自定义日期控件高度

  • 文档创建者:yiyemeiying
  • 编辑次数:9次
  • 最近更新:Kevin-s 于 2019-11-19
  • 1. 概述

    1.1 问题描述

    平时使用中总有一些客户要求比较高,对控件默认显示的效果不太满足,不是按钮选择框太大,就是配色不好等等。

    以日期控件为例,默认的样式如下图所示:

    222

    可能是用户浏览器太小,用户觉得选择框太大,能不能设置小一点?

    1.2 实现思路

    一般来说可以通过引入 CSS 文件覆盖原有样式的方法来实现。但是日期控件弹出面板这个比较特殊,这个是动态引入的 CSS 文件,点击了日期控件的下拉按钮才会加载的,所以引入  CSS 文件的方法就不能用了。我们可以等日期选择面板展现出来后再 JavaScript 调整 CSS 样式来实现。

    2. 示例

    2.1 操作步骤

    在参数面板添加日期控件,添加初始化后 JavaScript 事件,如下图所示:

    image.png

    JavaScript 代码如下:

    this.btn.bind('click',function() {
            //面板展现出来了执行
        setTimeout(function(){
            $('.fr-datepicker td').css({
                height:'10px',
                'font-size':'10px',
                padding:0
            });
            $('.fr-datepicker tr').css({
                height:'10px'
            });
        },100);   //初始化后,100ms后调用css样式
    });

    注:此方法适用于填报控件。移动端不支持。

    2.2 预览效果

    保存报表,点击分页预览,报表效果如下图所示:

    222


    3. 模板下载

    模板效果在线查看请点击:JS 自定义日期控件高度.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\04-JS自定义日期控件高度.cpt

    点击下载模板:04-JS自定义日期控件高度.cpt


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!