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

1. 描述

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

修改前：

修改后：

 

2. 思路

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

 

3. 操作步骤

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

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

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

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

点击自定义事件，添加 JS 代码，如下图：

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

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

 

4. 预览效果

4.1 PC 端预览效果

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

注：经过测试，暂不支持移动端。

 

5. 已完成模板

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

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

点击下载模板