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

编辑
文档创建者:yets11 (67190 )     浏览次数:1694次     编辑次数:4次     最近更新:幽冥猫儿 于 2018-05-02     

目录:

1. 问题描述 编辑

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

222

2. 解决思路编辑

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

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


3. 解决方法编辑

3.1 修改模板

打开模板:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm11.cpt

点击模板>模板web属性>分页预览设置,选择为该模板单独设置,然后添加加载结束事件如下图
222



代码如下:

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时隐藏或显示参数面板

4、预览效果

保存后,点击填报预览,就可以看到页面加载后滚动条自动滚动到最下方和最右侧了。

4.1 PC端预览效果

222

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

4.2 移动端预览效果

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


附件列表


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

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?