1. 问题描述编辑
在实际项目中,有可能会用到每页显示固定的行数和鼠标滑动变色,如果使用js来实现每页显示固定的行数,那么这时候就需要在工具栏自定义按钮来实现翻页了,具体该如何实现呢?
2. 解决方案编辑
在新模板中新建3个数据集。
ds1:SELECT * FROM 订单 where 货主地区 is not null and 应付金额 is not null ${if(len(area)>0," and 货主地区='"+area+"'","")} order by 货主地区,订单ID limit ${if(fr_pagenumber>=1,(fr_pagenumber-1)*pageSize+','+pageSize,pageSize)}
ds1用于展示正文报表数据。pageSize设置一个默认值,如10。
ds2:select 货主地区 from 订单 where 货主地区 is not null group by 货主地区
ds2是参数面板货主地区的数据字典来源。
ds3:${if(totalCount>0 && totalPage>0,'select '+totalCount+' as totalCount ','SELECT count(*) totalCount FROM 订单 where 货主地区 is not null and 应付金额 is not null '+ if(len(area)>0," and 货主地区='"+area+"'",""))}
ds3用于获取每次查询结果的记录条数,即每次查询结果共有多少条记录,并可以计算共有多少页报表。
添加4个参数:area:货主地区;totalPage:总页数;pageSize:每页显示数量;totalCount:总记录条数,如下图所示:
添加三个文本控件,分别命名为fr_pagenumer 、totalPage 、totalCount,totalCount值绑定数据列ds3的totalCount,参数界面如下图:
当前页:fr_pagenumer是报表自带的参数,不必再在模板参数里添加 ,该参数代表报表当前页是第几页。
总页数:totalPage是自定义的参数,代表报表总共有多少页。
总条数totalCount是自定义的参数,代表报表总共有多少条记录。
在地区后添加一个下拉框单选控件,控件命名为area,数据字典配置为:
再每页显示行数添加一个下拉框单选控件,控件命名为pageSize,数据字典配置为:
添加一个预定义查询按钮,添加按钮点击事件,如下图所示:
js代码如下:
模板设计如下图所示:
A列需要隐藏。A3单元格插入公式:ds1.select(#0),表示ds1数据集里的所有行号,行号从1开始。
A4插入公式:CONCATENATE("第",$fr_pagenumber,"页,共",roundup(value("ds3","totalCount")/$pageSize),"页,",$pageSize,"条/页,共",$totalCount,"条")
公式含义为
concatenate函数是将一系列的字符串值串联成新的字符串;
roundup函数是将含有小数的值进行向上取整;
value("ds3","totalCount")是获取ds3数据集里的totalCount列的值,因为ds3里只有一行一列,所以这样写就可以了,具体可查看value函数用法。
点击菜单模板>模板web属性>分页预览设置,设置为该模板单独设置,自定义翻页按钮只能在该模板使用,如下图所示:
(1)工具栏配置:先清空原有的工具栏,然后添加四个自定义按钮
首页按钮:编辑按钮图标,控件别名为首页,控件图表选择
点击自定义事件,添加js代码:
上一页按钮:编辑按钮图标,控件别名为上一页,控件图表选择
下一页按钮:编辑按钮图标,控件别名为下一页,控件图表选择
末页按钮:编辑按钮图标,控件别名为末页,控件图表选择
(2)js引用设置
在%FR_HOME%\WebReport目录下新建文件夹js,将page.js复制到js文件夹里,并点击菜单模板>报表web属性>引用JavaScript中进行引用js的配置,如下图所示:
注:如果js要在所有报表里引用,可在服务器>服务器配置>引用JavaScript里添加page.js。
js文件解释:
page.js包含了两个函数:
page_up_down函数,功能是点击翻页按钮时触发js事件,先获取当前页,再和总页数做对比,进行下一页、上一页的相应加减功能及跳转到末页功能。
afterload函数,功能是将数据集返回的报表总页数、总条数更新到参数面板的控件里,然后在查询时作为参数传递到sql里获取报表数据。
page.js代码:
(3)报表加载结束事件
点击菜单模板>模板web属性>分页预览设置,添加报表加载结束事件:
js代码如下:
若想设置页面居中的效果,继续在分页预览设置里添加报表加载结束事件,并在事件里加入js代码:
保存后,点击分页预览,即可看到如上效果。