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

た入场券 2022-02-02 01:53 210阅读 0赞

1. 描述

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

![http://help.finereport.com/uploads/201808/20180810154932\_8491.jpg][http_help.finereport.com_uploads_201808_20180810154932_8491.jpg]

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属性>填报页面设置，选择为该模板单独设置，然后添加加载结束事件，如下图：

![http://help.finereport.com/uploads/201808/20180810154932\_1058.png][http_help.finereport.com_uploads_201808_20180810154932_1058.png]

代码如下：

![20190510143500620.png][]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时隐藏或显示参数面板][JS_sheet]

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

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

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

![http://help.finereport.com/uploads/201808/20180810154932\_4911.png][http_help.finereport.com_uploads_201808_20180810154932_4911.png]

具体可以参考[重复与冻结设置][Link 1]。

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

![http://help.finereport.com/uploads/201808/20180810154932\_7043.png][http_help.finereport.com_uploads_201808_20180810154932_7043.png]

代码如下：

![20190510143500634.png][]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）示例一：未设置冻结的报表

![http://help.finereport.com/uploads/201808/20180810154932\_9513.jpg][http_help.finereport.com_uploads_201808_20180810154932_9513.jpg]

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

2）示例二：设置了冻结的报表

![http://help.finereport.com/uploads/201808/20180810154932\_7207.png][http_help.finereport.com_uploads_201808_20180810154932_7207.png]

4.2 移动端预览效果

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

5. 已完成模板

1）示例一

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

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

[点击下载模板][Link 2]

2）示例二

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

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

[点击下载模板][Link 3]

[http_help.finereport.com_uploads_201808_20180810154932_8491.jpg]: /images/20220202/fa3a59eee23f4991841ebd75fad2feb1.png
[http_help.finereport.com_uploads_201808_20180810154932_1058.png]: /images/20220202/3d5c53bd69e4470aa344a3c3e0885a15.png
[20190510143500620.png]: /images/20220202/144ffdc392b94e989e1346edcb53e056.png
[JS_sheet]: http://http/help.finereport.com/doc-view-1448.html
[http_help.finereport.com_uploads_201808_20180810154932_4911.png]: /images/20220202/ee55ca4ddc96480789132ae6820fb68a.png
[Link 1]: http://help.finereport.com/doc-view-209.html
[http_help.finereport.com_uploads_201808_20180810154932_7043.png]: /images/20220202/4d873f2d683c4c6bb9b8a6b1ef3d19e1.png
[20190510143500634.png]: /images/20220202/65a86343dbe040a784659350d6ecf697.png
[http_help.finereport.com_uploads_201808_20180810154932_9513.jpg]: /images/20220202/ee766c066c4044ed989d572c731edd5d.png
[http_help.finereport.com_uploads_201808_20180810154932_7207.png]: /images/20220202/5c83597efb77421287b1a6529b069a6d.png
[JS_.cpt]: http://www.finereporthelp.com:8889/demo/ReportServer?reportlet=doc/JS/%E5%A1%AB%E6%8A%A5%E9%A2%84%E8%A7%88JS%E5%AE%9E%E4%BE%8B/39-JS%E5%AE%9E%E7%8E%B0%E5%88%86%E6%9E%90%E6%88%96%E5%A1%AB%E6%8A%A5%E6%8A%A5%E8%A1%A8%E5%8A%A0%E8%BD%BD%E5%90%8E%E8%87%AA%E5%8A%A8%E6%BB%9A%E5%8A%A8%E5%88%B0%E6%9C%80%E4%B8%8B%E6%96%B9%E6%88%96%E6%9C%80%E5%8F%B3%E4%BE%A7%E7%A4%BA%E4%BE%8B%E4%B8%80.cpt&op=write
[Link 2]: http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/%E5%A1%AB%E6%8A%A5%E9%A2%84%E8%A7%88JS%E5%AE%9E%E4%BE%8B/39-JS%E5%AE%9E%E7%8E%B0%E5%88%86%E6%9E%90%E6%88%96%E5%A1%AB%E6%8A%A5%E6%8A%A5%E8%A1%A8%E5%8A%A0%E8%BD%BD%E5%90%8E%E8%87%AA%E5%8A%A8%E6%BB%9A%E5%8A%A8%E5%88%B0%E6%9C%80%E4%B8%8B%E6%96%B9%E6%88%96%E6%9C%80%E5%8F%B3%E4%BE%A7%E7%A4%BA%E4%BE%8B%E4%B8%80.cpt
[JS_.cpt 1]: http://www.finereporthelp.com:8889/demo/ReportServer?reportlet=doc/JS/%E5%A1%AB%E6%8A%A5%E9%A2%84%E8%A7%88JS%E5%AE%9E%E4%BE%8B/39-JS%E5%AE%9E%E7%8E%B0%E5%88%86%E6%9E%90%E6%88%96%E5%A1%AB%E6%8A%A5%E6%8A%A5%E8%A1%A8%E5%8A%A0%E8%BD%BD%E5%90%8E%E8%87%AA%E5%8A%A8%E6%BB%9A%E5%8A%A8%E5%88%B0%E6%9C%80%E4%B8%8B%E6%96%B9%E6%88%96%E6%9C%80%E5%8F%B3%E4%BE%A7%E7%A4%BA%E4%BE%8B%E4%BA%8C.cpt&op=write
[Link 3]: http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/%E5%A1%AB%E6%8A%A5%E9%A2%84%E8%A7%88JS%E5%AE%9E%E4%BE%8B/39-JS%E5%AE%9E%E7%8E%B0%E5%88%86%E6%9E%90%E6%88%96%E5%A1%AB%E6%8A%A5%E6%8A%A5%E8%A1%A8%E5%8A%A0%E8%BD%BD%E5%90%8E%E8%87%AA%E5%8A%A8%E6%BB%9A%E5%8A%A8%E5%88%B0%E6%9C%80%E4%B8%8B%E6%96%B9%E6%88%96%E6%9C%80%E5%8F%B3%E4%BE%A7%E7%A4%BA%E4%BE%8B%E4%BA%8C.cpt