JS实现标题动态居中

1. 概述
1.1 问题描述

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

这种情形下，我们希望报表的标题始终显示在屏幕的中间，效果如下图所示：

1.2 实现思路

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

2. 示例

2.1 数据准备

新建数据集 ds1，SQL 语句为：SELECT * FROM S人员花名册 limit 20

2.2 模板设置

将数据字段拖动到单元格中，合并第一行单元格，输入标题信息：<span id="title_text">人员花名册</span>，样式设置为居左，选择用HTML方式显示内容。如下图所示：

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

2.3 添加事件

菜单栏选择模板>模板 Web 属性，在对应的预览方式下添加加载结束事件，如下图所示：

JavaScript 代码如下：

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

复制代码

2.4 预览效果

保存模板，选择填报预览，效果如下图所示：

注：不支持移动端。

3. 模板下载

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

点击下载模板：01-JS实现标题动态居中.cpt

4. 注意事项

如果模板中设置了重复冻结，需要修改加载结束事件的代码，将上面 2.3 节的 JavaScript 代码替换成下面的代码即可：

1. //////////////标题动态居中
   
2. var a,b,c,d;
   
3. function retitle(){
   
4. a=$(".content-container").width();        //文档宽度
   
5. b=$("#frozen-north").scrollLeft();   //冻结区横向滚动宽度
   
6. c=$("#title_text").width();               //冻结区标题文字宽度
   
7. d=$("#frozen-north table").width(); //冻结区表格宽度
   
8. 
   
9. if(a>d){ //无滚动条时
   
10.      $("[id^=A1-]").css("text-align","center");
    
11. }else{//有滚动条时
    
12. $("[id^=A1-]").css("padding-left",(a/2+b-c/2));
    
13. }
    
14. }
    
15. retitle();  //初始化居中
    
16. $("#frozen-north").scroll(function(){  //拖动滚动条触发事件
    
17. retitle();        
    
18. })

复制代码

那种标题是用公式写的能不能这样动态居中呢，还有那种标题用数据集写的那种

可以是可以，貌似只能用填报预览，像那种分页预览还有冻结的就不可以了

多sheet情况，sheet2开始后面就没用了

名字左对齐，不用加那些字符也可以，在加载结束添加就可以了