JS实现横向宽报表标题始终在页面中间

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

    1.1 问题描述

    在填报、分析报表中,默认报表页面是不分页的,分页预览中使用__bypagesize__=false,也可以实现横向不分页,但是横向不分页带来的一个问题的,当滚动条滚动时,某个需要固定位置的单元格内容也随着滚动,有时我们想固定这些内容,比如标题,某个图表等等始终处于页面中间或某个位置显示,如下图效果,这种效果如何实现呢。

    222

    1.2 实现思路

    通过 JS 修改单元格页面布局样式,再设置左边距及上边距及可达到要求

    2. 示例

    2.1 操作步骤

    1) 打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\CutPage\CutPage.cpt

    2)在第一行上方插入一行,合并 C1:O1 单元格,并设置标题,设置好字体和颜色等

    image.png

    3)点击模板>模板 Web 属性,选择填报页面设置,添加加载结束事件,修改标题所在单元格的布局及位置

    image.png

    JS 代码如下:

    var $bt=$('td[id^=C1-]');
    //获取单元格对象
    $bt.css('position','fixed');
    //设置位置为固定位置
    $bt.css('left',(document.body.clientWidth-$bt.width())/2-$('td[id^=C3-]').width());
    //设置左边距,需要减掉冻结列的宽度
    $bt.css('top','50px');
    //设置上边距

    注:在设置左边距时需要设置减去有冻结列的宽度  

    另:此方法同样适用于需要设置单元格或图表在纵向某个位置的固定显示,原理同上,修改单元格布局样式,再设置左边距及上边距即可!


    2.2 预览效果

    保存模板,选择填报预览,PC 端实现效果下图所示:

    222


    注:此 JS 不支持移动端使用


    3. 模板下载

    模板效果在线查看请点击:JS 实现横向宽报表标题始终在页面中间.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\34-JS实现横向宽报表标题始终在页面中间.cpt

    点击下载模板:34-JS实现横向宽报表标题始终在页面中间.cpt


    附件列表


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