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

待我称王封你为后i 2021-12-22 06:39 448阅读 0赞

## 1. 描述 ##

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

修改前：  
![20180814113527_2770.png][]

修改后：  
![20180814113527_9247.png][]

## 2. 思路 ##

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

## 3. 操作步骤 ##

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

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

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

![1534225201m7PRaqTF.png][]

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

![1534225214qkJinIIB.png][]

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

![1534225230IKKvOLFr.png][]

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

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

![1534225242ySrSWMiX.png][]

## 4. 预览效果 ##

### 4.1 PC 端预览效果 ###

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

![20180814113528_9481.gif][]

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

## 5. 已完成模板 ##

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

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

[点击下载模板][Link 1]

[20180814113527_2770.png]: /images/20211220/e0fb424dfc974ddcb303666e4616d1d4.png
[20180814113527_9247.png]: /images/20211220/0d428dabba084e0ba9ab715f1e7e8e1d.png
[1534225201m7PRaqTF.png]: /images/20211220/a64e338ff9f74ac99d42f1bbca2bcb29.png
[1534225214qkJinIIB.png]: /images/20211220/b9540e21ca3e40a6a3b082a57da3eed6.png
[1534225230IKKvOLFr.png]: /images/20211220/4c4163c59799456eb3f6c0d73ae116a7.png
[1534225242ySrSWMiX.png]: /images/20211220/f294ff847bae492299ac38549dc38696.png
[20180814113528_9481.gif]: /images/20211220/90c168341211490d8bd886cf6e1d0ec6.png
[JS _.cpt]: http://www.finereporthelp.com:8889/demo/ReportServer?reportlet=doc/JS/%E5%B7%A5%E5%85%B7%E6%A0%8FJS%E5%AE%9E%E4%BE%8B/05-JS%E5%AE%9E%E7%8E%B0%E5%B7%A5%E5%85%B7%E6%A0%8F%E5%A2%9E%E5%8A%A0%E8%B7%B3%E8%BD%AC%E5%88%B0%E6%8C%87%E5%AE%9A%E9%A1%B5%E9%9D%A2%E6%8C%89%E9%92%AE.cpt
[Link 1]: http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/%E5%B7%A5%E5%85%B7%E6%A0%8FJS%E5%AE%9E%E4%BE%8B/05-JS%E5%AE%9E%E7%8E%B0%E5%B7%A5%E5%85%B7%E6%A0%8F%E5%A2%9E%E5%8A%A0%E8%B7%B3%E8%BD%AC%E5%88%B0%E6%8C%87%E5%AE%9A%E9%A1%B5%E9%9D%A2%E6%8C%89%E9%92%AE.cpt