历史版本5 :JS实现点击跳转按钮跳转到指定页面 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

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

修改前:
222

修改后:
222

2. 思路编辑

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

3. 操作步骤编辑

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

打开模板%FR_HOME%\WebReport\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%\WebReport\WEB-INF\reportlets\doc\JS\工具栏JS实例\05-JS实现工具栏增加跳转到指定页面按钮.cpt