JS实现分析/填报报表加载后自动滚动到最下方/最右侧

时间:2024-05-18 12:28:35

1. 描述

分析/填报页面做出的报表由于没有分页,通常页面较大,而有些场景要求在页面加载后自动滚动到浏览器最下方或最右侧,方便查看或填报最新的数据。实现效果如下图,页面加载后滚动条自动滚动到最下方和最右侧了。

JS实现分析/填报报表加载后自动滚动到最下方/最右侧

2. 思路

contentPane.$contentPane.scrollTop()//指定页面滚动条的最上方位置

contentPane.$contentPane.scrollLeft()//指定页面滚动条的最左侧位置

上述方法针对未添加冻结的报表,使用了填报冻结的报表无法奏效,这时需要获取到非冻结区的宽度和高度并赋值。

var a=$("#frozen-center")[0]; 

var y=a.scrollHeight;//获取页面最大高度 

var x=a.scrollWidth;//获取页面最大宽度

3. 操作步骤

3.1 示例一:未设置冻结的报表

打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\插入删除行重新编号.cpt

点击模板>模板web属性>填报页面设置,选择为该模板单独设置,然后添加加载结束事件,如下图:

JS实现分析/填报报表加载后自动滚动到最下方/最右侧

代码如下:

JS实现分析/填报报表加载后自动滚动到最下方/最右侧setTimeout(function(){   

  var y=contentPane.$contentPane[0].scrollHeight;//获取页面最大高度

  var x=contentPane.$contentPane[0].scrollWidth;//获取页面最大宽度

  contentPane.$contentPane.scrollLeft(x);//设置滚动条最左方位置

  contentPane.$contentPane.scrollTop(y);//设置滚动条最上方位置

},100)

注:之所以使用setTimeout()延时函数,是因为在页面加载结束时,有些情况下设置不成功,这样用兼容性更好。

在其他需求中,可能需要控件滚动条在不同的位置,比如多sheet应用中,需要在切换sheet后页面滚动条回到最上方,可以直接在切换sheet事件中使用contentPane.$contentPane.scrollTop(0),恢复默认滚动条位置。切换sheet的JS写法可以参考JS实现切换sheet时隐藏或显示参数面板

3.2 示例二:设置了冻结的报表

仍以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\插入删除行重新编号.cpt为例。

设置第二行为冻结行。模板>重复与冻结设置;设置如下图所示:

JS实现分析/填报报表加载后自动滚动到最下方/最右侧

具体可以参考重复与冻结设置

修改加载结束事件。如下图所示:

JS实现分析/填报报表加载后自动滚动到最下方/最右侧

代码如下:

JS实现分析/填报报表加载后自动滚动到最下方/最右侧setTimeout(function(){

var a=$("#frozen-center")[0];

var y=a.scrollHeight;//获取页面最大高度

var x=a.scrollWidth;//获取页面最大宽度

a.scrollLeft=x;

a.scrollTop=y;

},100)

4. 预览效果

4.1 PC端预览效果

1)示例一:未设置冻结的报表

JS实现分析/填报报表加载后自动滚动到最下方/最右侧

注:如果桌面分辨率较高,看不到效果的话,可以缩小浏览器窗口,刷新页面再 观察效果

2)示例二:设置了冻结的报表

JS实现分析/填报报表加载后自动滚动到最下方/最右侧

4.2 移动端预览效果

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

5. 已完成模板

1)示例一

模板效果在线查看请点击:JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例一.cpt

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\39-JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例一.cpt

点击下载模板

2)示例二

模板效果在线查看请点击:JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例二.cpt

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\39-JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例二.cpt

点击下载模板