JS实现标题动态居中

编辑
  • 文档创建者:axing
  • 浏览次数:2283次
  • 编辑次数:8次
  • 最近更新:Kevin-s 于 2019-06-22
  • 1. 描述

    场景描述:在某些制作宽报表时,报表的宽度远超过了页面的宽度,这时就出现了横向的滚动条,如果我们设置报表标题为居中样式,很有可能看不到标题。

    这种情形下,我们希望报表的标题始终显示在屏幕的中间。

    如下所示:

    2. 思路

    在每次拖动滚动条时,获取滚动的距离,并结合页面上其他元素的宽度,重新定位标题的位置。

    3. 操作步骤

    3.1 数据集

    新建模板->新建数据查询->添加 ds1 数据集->添加 SQL 语句如下为:SELECT * FROM S人员花名册 limit 20

    3.2 模板设置

    将数据字段拖动到单元格中,并将第一行合并单元格,添加标题(用标签括起来):<span id="title_text">人员花名册</span> ,样式设置为居左,选择 HTML 方式显示内容。如下所示:

    注:为了在 JS 获取标题的宽度,给标题添加 id 标志。

    3.3 添加事件

    选择模板>模板 Web 属性,在对应的预览方式下添加“加载结束事件”,如下图:

    var a,b,c,d;
    function retitle(){
    a=$('.content-container').width();        //文档宽度
    b=$('.content-container').scrollLeft();   //横向滚动宽度
    c=$("#title_text").width();               //标题文字宽度
    d=$(".x-table").width();                  //表格宽度
    if(a>d){ //无滚动条时
         $("[id^=A1-]").css("text-align","center");
    }else{//有滚动条时
    $("[id^=A1-]").css("padding-left",(a/2+b-c/2));
    }
    }
    retitle();  //初始化居中
    $('.content-container').scroll(function(){  //拖动滚动条触发事件
    retitle();        
    })

    3.4 保存预览

    保存模板,选择填报预览,效果如上图。

    4. 预览效果

    4.1 PC 端预览效果



    注:经过测试,手机端和 H5 不支持该效果。

    5. 已完成模板

    模板效果在线查看请点击:JS 实现标题动态居中.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\01-JS实现标题动态居中.cpt

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]