JS实现工具栏增加跳转到指定页面按钮

编辑
  • 文档创建者:yets11
  • 浏览次数:26938次
  • 编辑次数:8次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 描述

    场景描述:FineReport 的分页预览默认提供了跳转到首页,上一页,下一页,跳转到最后一页的按钮,如果需要跳转到指定页,需要先输入页面,再回车,这是默认的解决方法,但很多人对回车键操作不是很习惯,习惯于点击按钮,需要在工具栏增加点击按钮跳转到指定页的功能。

    修改前:
    222

    修改后:
    222


    2. 思路

    在分页预览设置下,新建一个按钮,自定义事件中获取工具栏页面输入框的值,然后跳转到其输入值页面。


    3. 操作步骤

    FineReport 提供了 contentPane.gotoPage() 函数可以跳转到指定页面,但是一般使用场景是添加一个输入页面的文本框,再增加一个按钮,不是很方便,为了集成到工具栏中,我们还需要获取工具栏中输入页面的文本框的值。

    打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Pagination\GroupPagination.cpt

    点击模板>模板 Web 属性>分页预览设置,选择为该模板单独设置,为工具栏增加一个自定义按钮,如下图:

    222

    进入工具栏设置,设置此自定义按钮名字为跳转,选择跳转图标,如下图:

    222

    点击自定义事件,添加 JS 代码,如下图:

    222


    var page=$('.x-toolbar input').val();//获取工具栏页面输入框的值
    contentPane.gotoPage(parseInt(page));//跳转到指定页面,这里需要将上面的值转成数值型

    从使用方便性角度,点击上升按钮将改自定义按钮移动到当前页下方(在报表上显示为“当前页/总页数”后面),如下图:

    222


    4. 预览效果

    4.1 PC 端预览效果

    设置完成后,保存模板,选择分页预览,输入页面数,点击跳转,即可达到需求

    222

    注:经过测试,暂不支持移动端


    5. 已完成模板

    模板效果在线查看请点击:JS 实现工具栏增加跳转到指定页面按钮.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\05-JS实现工具栏增加跳转到指定页面按钮.cpt

    点击下载模板


    附件列表


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

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

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