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

编辑
文档创建者:yets11 (67190 )     浏览次数:1645次     编辑次数:7次     最近更新:ukae 于 2018-08-10     

目录:

1. 描述编辑

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

222

2. 思路编辑

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

3. 操作步骤编辑

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

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

222

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

222

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'); //设置上边距

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

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

4. 预览效果编辑

4.1 PC端预览效果

222

4.2 移动端预览效果

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

5. 已完成模板编辑

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


附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

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

此页面有帮助吗? [ 去社区提问 ]