历史版本1 :JS实现动态设置每页显示固定行数 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:
1、问题描述
在实际项目中，有可能会用到js实现自定义分页和定义每页显示的行数，那么该如何实现呢？
222

目录:

2、解决方案编辑

2.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用于参数面板货主地区的数据字典来源。
222

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

2.2  模板参数配置

添加4个参数：area:货主地区参数；totalPage:总页数；pageSize:每页显示数量；totalCount:总记录条数

2.3  参数面板配置
添加三个文本控件，分别命名为fr_pagenumer   、totalPage  、totalCount,totalCount值绑定数据列ds3的totalCount
fr_pagenumer是报表自带的参数，不必再在模板参数里添加 ，该参数代表报表当前页是第几页
totalPage是自定义的参数，代表报表总共有多少页
totalCount是自定义的参数，代表报表总共有多少条记录

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

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

添加一个预定义查询按钮。添加按钮点击事件：
var widget=contentPane.parameterEl.getWidgetByName('fr_pagenumber');
widget.setValue('1');//每次点击查询时将当前页重置为1
_g().parameterCommit();

2.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函数用法可参考文档

2.5  报表分页预览配置
菜单模板>模板web属性>分页预览设置，设置为【为该模板单独设置】，自定义翻页按钮只能在该模板使用

 
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

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

page.js代码：

//翻页按钮事件 function page_up_down(mode,obj){ var widget=contentPane.parameterEl.getWidgetByName("fr_pagenumber"); var fr_pagenumber=widget.getValue(); console.log('fr_pagenumber='+fr_pagenumber); if(mode=='firstPage'){//首页 if(fr_pagenumber>1){ widget.setValue(1); }else{ obj.setEnable(false); return ; } }else if(mode=='lastPage'){//末页 var widget2=contentPane.parameterEl.getWidgetByName('totalPage'); var totalPage=widget2.getValue(); //console.log('totalPage='+totalPage); if(parseInt(fr_pagenumber)<parseInt(totalPage)){ widget.setValue(totalPage); }else{ obj.setEnable(false); return ; } }else if(mode=='prevPage'){//上一页 if(fr_pagenumber>1){ fr_pagenumber=parseInt(fr_pagenumber)-parseInt(1); widget.setValue(fr_pagenumber); }else{ obj.setEnable(false); return ; } }else if(mode=='nextPage'){//下一页 var widget2=contentPane.parameterEl.getWidgetByName('totalPage'); var totalPage=widget2.getValue(); fr_pagenumber=parseInt(fr_pagenumber)+parseInt(1); if(parseInt(fr_pagenumber)<=parseInt(totalPage)){ widget.setValue(fr_pagenumber); }else{ obj.setEnable(false); return ; } } _g().parameterCommit();//报表参数提交 } function afterload(){ //更新总页数 var widget=contentPane.parameterEl.getWidgetByName('totalPage'); var widget2=contentPane.parameterEl.getWidgetByName('pageSize'); var widget3=contentPane.parameterEl.getWidgetByName('totalCount'); if(widget){ var totalCount=widget3.getValue(); var pageSize=widget2.getValue(); var totalPage=Math.ceil(totalCount/pageSize); console.log('totalPage='+totalPage); var newPage=widget.getValue(); if(newPage<1){ newPage=1; } //if(newPage!=totalPage){ widget.setValue(totalPage); //} var widget4=contentPane.parameterEl.getWidgetByName('fr_pagenumber'); var pagenumber=widget4.getValue(); if(pagenumber>totalPage && totalPage>0){ widget4.setValue(totalPage); } } } 

3）报表加载结束事件
在分页预览设置里添加报表加载结束事件

并在事件里加入js代码

afterload();

 

设置鼠标滑动变色的效果

在分页预览设置里添加报表加载结束事件，并在事件里加入js代码：

contentPane.makeHighlight('#E6E6FA ','mouseover');//鼠标滑动变色

设置页面居中的效果

在分页预览设置里添加报表加载结束事件，并在事件里加入js代码：

//框架 var wrap = $('.reportPane'); //主体内容 var body = $('.page-block'); //计算偏移 var dif = (wrap.width() - body.width()) / 2; //设置属性 body.css({'margin-left': dif});


2.6 效果图
使用分页模式预览模板就可以看到效果图了