JS实现工具栏增加跳转到指定页面按钮
发布日期:2021-05-14 05:52:20 浏览次数:22 分类:精选文章

本文共 905 字,大约阅读时间需要 3 分钟。

描述

FineReport 的分页预览模块默认提供了基本的分页导航功能,包括跳转到首页、上一页、下一页以及最后一页的操作按钮。为了满足用户对直接点击按钮跳转到指定页面页的需求,我们可以通过添加一个自定义的工具栏按钮来实现。这种方法不仅提高了操作便利性,还使得跳转功能更加直观简便。

思路

为了实现跳转到指定页面的功能,我们可以通过以下步骤实现:

  • 在分页预览模板中添加一个自定义按钮
  • 为该按钮绑定一个 JavaScript 函数,该函数用于获取工具栏中的当前输入值并跳转至指定页面
  • 通过这种方式,我们可以轻松地实现按需跳转,同时保持模板的灵活性和可维护性。

    操作步骤

    为了集成跳转到指定页面的功能,请按照以下步骤操作:

  • 打开相应的模板文件,路径为%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Pagination\GroupPagination.cpt
  • 进入模板属性界面,选择“模板 Web 属性”中的“分页预览设置”
  • 在工具栏中添加一个自定义按钮,并将其命名为“跳转”
  • 为该按钮设置一个图标(如“导航”图标)以增强用户体验
  • 点击自定义事件设置,添加以下 JavaScript 代码:
  • var page = $('.x-toolbar input').val();  contentPane.gotoPage(parseInt(page));

    此处代码用于获取工具栏中的页面输入值,并将其转换为整数后执行跳转操作

    6. 为新添加的“跳转”按钮在工具栏中设置合适的布局,确保其与现有按钮一致风格

    预览效果

    完成上述设置后,您可以通过以下方式进行测试:

  • 保存模板后,打开分页预览界面
  • 输入目标页数值后,点击“跳转”按钮
  • 您将看到跳转至指定页面的内容
  • 需要注意的是,目前该功能在移动端尚不完善,建议在PC端进行使用。

    已完成模板

    您可以在以下路径找到已完成的模板进行在线查看:

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\05-JS实现工具栏增加跳转到指定页面按钮.cpt

    上一篇:JS实现删除行按钮只有一行时不能删除
    下一篇:帆软用户密码加密

    发表评论

    最新留言

    逛到本站,mark一下
    [***.202.152.39]2025年05月02日 09时22分36秒