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

编辑
  • 文档创建者:yets11
  • 浏览次数:4397次
  • 编辑次数:11次
  • 最近更新:Kevin-s 于 2019-11-26
  • 1. 概述

    1.1 问题描述

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

    222


    1.2 实现思路

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

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

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

    var a=$("#frozen-center")[0]; 
    var y=a.scrollHeight;//获取页面最大高度 
    var x=a.scrollWidth;//获取页面最大宽度


    2. 示例

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

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

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

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


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

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

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

    222

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

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

    image.png

    代码如下:


    setTimeout(function(){ 
    var a=$("#frozen-center")[0]; 
    var y=a.scrollHeight;//获取页面最大高度 
    var x=a.scrollWidth;//获取页面最大宽度 
    a.scrollLeft=x; 
    a.scrollTop=y; 
    },100)


    2.3 预览效果

    保存模板,点击填报预览,PC 端效果如下所示:

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

    222


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

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

    222

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


    3. 模板下载

    1)示例一

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

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

    点击下载模板:39-JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例一.cpt

    2)示例二

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

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

    点击下载模板:39-JS实现分析或填报报表加载后自动滚动到最下方或最右侧示例二.cpt


    附件列表


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

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

    此页面有帮助吗?只是浏览 [ 去社区提问 ]