报表性能优化>>实时加载单页数据(自定义按钮翻页)

楼主
我是社区第60611位番薯,欢迎点我头像关注我哦~
本帖最后由 加菲喵 于 2015-9-10 16:11 编辑

文档来源:原文http://www.finereporthelp.com/help/24/0/9.html
1 分类
性能优化>>报表性能优化>>实时加载单页数据(自定义按钮翻页)
2 标题
实时加载单页数据(自定义按钮翻页)
3 描述
(1)增加每页显示数量功能、跳转到第N页(修改当前页)功能

4 解决方案
通过sql每次获取当前页数据,再利用工具栏里的自定义按钮实现翻页。该解决方案可通用。cpt、js已上传。
5 实现步骤
(1)模板数据集配置:
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设置一个默认值,预览时不会提示出错,如图


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用于获取每次查询结果的记录条数,即每次查询结果共有多少条记录,并可以计算共有多少页报表。

(2)模板参数配置:

添加4个参数:
area:货主地区参数
totalPage:总页数
pageSize:每页显示数量
totalCount:总记录条数
(3)参数面板配置

主要部分:
添加一个下拉框单选控件,控件命名为area,数据字典配置为

添加一个下拉框单选控件,控件命名为pageSize,数据字典配置为

添加三个文本控件,分别命名为fr_pagenumer   、totalPage  、totalCount,totalCount值绑定数据列ds3的totalCount
fr_pagenumer是报表自带的参数,不必再在模板参数里添加 ,该参数代表报表当前页是第几页
totalPage是自定义的参数,代表报表总共有多少页
totalCount是自定义的参数,代表报表总共有多少条记录
添加一个预定义查询按钮。添加按钮点击事件:
var widget=contentPane.parameterEl.getWidgetByName('fr_pagenumber');
widget.setValue('1');//每次点击查询时将当前页重置为1
_g().parameterCommit();


(4)contentPane配置

主要部分:
A列需要隐藏。A3插入公式=ds1.select(#0)   表示ds1数据集里的所有行号,行号从1开始
A4插入公式=CONCATENATE("第",$fr_pagenumber,"页,共",roundup(value("ds3","totalCount")/$pageSize),"页,",$pageSize,"条/页,共",$totalCount,"条")
公式含义为
concatename函数是将一系列的字符串值串联成新的字符串
roundup函数是将含有小数的值进行向上取整
value("ds3","totalCount")是获取ds3数据集里的totalCount列的值,因为ds3里只有一行一列,所以这样写就可以了,具体value函数用法可参考文档
(5)报表分页预览配置

如图,主要部分
设置为【为该模板单独设置】,自定义翻页按钮只能在该模板使用。
设置为【采用服务器设置】需要把自定义按钮放在【服务器】-【服务器配置】的工具栏里,实现自定义翻页按钮通用。

1)工具栏配置:先清空原有的工具栏,然后添加四个自定义按钮
首页按钮:编辑按钮图标,选择 ,【自定义js事件】里添加调用js代码  page_up_down('firstPage',this);
            

上一页按钮:编辑按钮图标,选择 ,【自定义js事件】里添加调用js代码  page_up_down('prevPage',this);(截图略)
下一页按钮:编辑按钮图标,选择 ,【自定义js事件】里添加调用js代码  page_up_down('nextPage',this);(截图略)
末页按钮:编辑按钮图标,选择 ,【自定义js事件】里添加调用js代码  page_up_down('lastPage',this);(截图略)
2)js引用设置

在FineReport8.0\WebReport\目录下新建文件夹js,将附件page.js复制到js文件夹里,并在报表web属性里进行引用js的配置,如果js要在所有报表里引用,在【服务器】-【服务器配置】-【引用JavaScript】里添加page.js
3)报表加载结束事件
在分页预览设置里添加报表加载结束事件

并在事件里加入js代码,afterload();

js文件解释:
page.js包含了两个函数:
page_up_down函数,功能是点击翻页按钮时触发js事件,先获取当前页,再和总页数做对比,进行下一页、上一页的相应加减功能及跳转到末页功能。
afterload函数,功能是将数据集返回的报表总页数、总条数更新到参数面板的控件里,然后在查询时作为参数传递到sql里获取报表数据。
6 效果截图









分享扩散:
参与人数 +1 F币 +80 理由
传说哥 + 80 赞一个!

查看全部评分

沙发
发表于 2015-8-12 18:52:00
楼主,原文档已有,你有仔细看嘛
板凳
发表于 2015-8-13 13:55:16
楼主,原文档已经有了
评分:C级
地板
发表于 2015-8-18 09:33:49
补充等级B
5楼
发表于 2015-8-25 16:15:53

6楼
发表于 2015-10-16 11:38:07
这个原文补充比原来的文档做得更容易阅读。如果所有的DEMO 能搭个视频就更完美啦
7楼
发表于 2019-9-27 10:17:51
楼主的DEMO很好,能用
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

6回帖数 1关注人数 11891浏览人数
最后回复于:2019-9-27 10:17

返回顶部 返回列表