报表居中

专题总结 >> 设计报表 >> 报表居中

报表居中

  描述

  解决方案

    1设置页面宽度；

    2报表水平居中，垂直居中；

    3浏览器居中；

    4JS使报表居中；

  总结

1.描述

   为了设置报表美观度，我们要设置报表在页面的居中，以下将从四个方面讲述关于报表居中。

2解决方案

2.1模板》设置页面宽度》页面

      

      2.1.2 效果预览：

      

      2.1.3总结： 需要不断修改页边距，与页面大小，此方法是最笨的方法，不推荐，仅为解决方法之一

2.2报表水平居中，垂直居中

      2.2.1 模板》页面设置》其他

      

      2.2.2 效果预览：

      

      2.2.3 总结： 需要注意一点，设置垂直居中后，如果最后一页数据太少，也会垂直居中，显示在页面中，影响最后的美观

2.3，设置报表在浏览器居中

     2.3.1在此可以选择预览方式： 分页预览设置，填报页面设置，页面分析设置。在此按照分页预览设置 为例：

    模板》报表web属性》分页预览设置》为该模板单独设置》居中展示

     

     

      2.3.2 效果预览

     

      2.3.3总结：在浏览器中居中显示，于在报表居中显示差别很大，一个是适应报表，一个是适应浏览器

2.4  JS使报表居中

    2.4.1 模板》报表web属性》分页预览设置

         

     2.4.2 JS设置

     

1. //框架
   
2. var wrap = $('.reportPane');
   
3. //主体内容
   
4. var body = $('.page-block');
   
5. //计算偏移
   
6. var dif = (wrap.width() - body.width()) / 2;
   
7. //设置属性
   
8. body.css({'margin-left': dif});

复制代码

       wrap ：拿到浏览器的宽度

       body :  拿到报表的宽度

       dif  :   计算拿到需要偏移的宽度

2.4.3  效果预览

      

2.4.4 总结：设置JS报表居中，同样属于浏览器居中。

3 总结

  设置报表居中显示方式有很多种， 一般我们选择2.2报表水平居中 2.3 浏览器居中，不推荐使用2.2报表垂直居中。

示例： 1.cpt (11.75 KB, 下载次数: 121)

2015-8-15 11:05 上传

点击文件名下载附件

周末还这么敬业，我来顶你一下。

建议加一下别的预览方式下的居中的js的写法，如填报预览、数据分析预览；还有如果报表设置冻结后，居中的js还是这个吗？如果不是，应该怎么写？

楼主辛苦了，总结了报表居中
难度25
详尽度30
通用度15

可以的。。。。。

正在完善中  预计2015年9月6日晚上完成

2015年9月6日21:43:47 完成   

2015年9月6日21:43:47 完成修改   

没有看到三种预览方式啊？

不用啦，维持一轮评分

{:8_209:}{:8_209:}

楼主很是辛苦，好详细啊 。

very nice

厉害

报表填报居中如何添加结束事件，报表为多sheet表，有冻结行

这四个方式一个一个的试了，还是没成功，一直靠左

第四个好用