JS实现动态设置每页显示固定行数

1.1 版本

1.2 预期效果

在实际项目中，要求每页显示固定的行数，在工具栏实现翻页，鼠标滑动时单元格所在行变色，效果如下图所示：

1.3 解决思路

使用 JavaScript 来实现每页显示固定的行数，自定义工具栏按钮实现翻页。

2.1 准备数据集

新建模板，在模板中新建数据集

1）新建 ds1 数据集，SQL语句如下： 

ds1 将会作为报表页面要呈现的数据，其中设置了数据集参数 area 和 pageSize ，area 为地区，pageSize 为每页显示的行数，设置 pageSize 的默认值为 10 ，fr_pagenumer 是 FR 报表自带的参数，该参数代表报表当前页是第几页。

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)}

2）新建 ds2 数据集，SQL语句如下： 

ds2 将会是参数面板中货主地区下拉框控件的数据来源。

select 货主地区 from 订单 where 货主地区 is not null group by 货主地区

3）新建 ds3 数据集，SQL语句如下： 

ds3 用于获取每次查询结果的记录条数，即每次查询结果共有多少条记录。其中设置了数据集参数 totalPage 和 totalCount，totalPage 代表报表总共有多少页，totalCount 代表报表总共有多少条记录。

${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+"'",""))} 

2.2 添加参数控件

根据设置的数据集参数，在参数面板添加参数控件，参数和控件的绑定使用可以参考文档：参数简介 。

1）添加参数控件 area 和 pageSize 选择为下拉框控件，area 控件绑定「ds2 」数据集，实际值和显示值为「货主地区」，pageSize 控件类型设置为自定义，实际值和显示值为 10-50 ，表示每页显示的行数。将文本控件 Labelarea 和 LabelpageSize 控件值分别设置为「地区：」和「每页显示行数：」，如下图所示：

2）添加参数控件 totalPage 和 totalCount  选择为文本控件，其中 totalCount 控件值为「字段」，绑定数据列 ds3 的 totalCount 列。控件LabeltotalPage 和 LabeltotalCount 的控件值为「总页数：」和「总条数：」。如下图所示：

3）添加两个文本控件，其中一个文本控件名称为 fr_pagenumer ，另一个文本控件的控件值为「当前页：」，如下图所示：

4）选择「查询按钮」，添加按钮点击事件，如下图所示：

JavaScript 代码如下：

var widget=contentPane.parameterEl.getWidgetByName('fr_pagenumber');
widget.setValue('1');//每次点击查询时将当前页重置为1
_g().parameterCommit();

5）向上拉动参数面板边界线，隐藏不需要显示的参数，参数面板最终效果如下图所示：

2.3 设计报表样式

设计报表样式，如下图所示：

1）A3 单元格插入公式 seq() 生成序号。

2）A4 单元格插入公式统计页数信息，公式如下：CONCATENATE("第",$fr_pagenumber,"页，共",roundup(value("ds3","totalCount")/$pageSize),"页，",$pageSize,"条/页，共",$totalCount,"条")
公式解释：

2.4 自定义翻页按钮

2.4.1 设置按钮名称

点击菜单「模板>模板 Web 属性>分页预览设置」，设置「为该模板单独设置」，在使用工具栏位置，先清空原有工具栏，然后添加 4 个自定义按钮，四个自定义按钮名称分别为：首页、上一页、下一页、末页。如下图所示：

2.4.2 设置按钮 JS 事件

分别为按钮添加点击自定义事件，如下图所示：

JavaScript 代码如下：

1）首页按钮：

page_up_down('firstPage',this);

2）上一页按钮：

page_up_down('prevPage',this);

3）下一页按钮：

page_up_down('nextPage',this);

4）末页按钮：

page_up_down('lastPage',this);

2.5 引用 JavaScript 

点击下载 JavaScript 文件：   page.js

下载 page.js 后保存在%FR_HOME%\webapps\webroot目录下。

点击菜单「模板>报表 Web 属性>引用 JavaScript 」，在磁盘文件中找到刚刚下载的 page.js 文件，引用 JavaScript 的配置，如下图所示：

注：此 JS 文件引用后只支持当前报表，如果要在所有报表里使用，可在「服务器>服务器配置>引用 JavaScript 」里添加 page.js 。

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);
}
}
}
显示代码

page.js 包含了两个函数：

• page_up_down 函数，功能是点击翻页按钮时触发 JS 事件，先获取当前页，再和总页数做对比，进行下一页、上一页的相应加减功能及跳转到末页功能。

• afterload 函数，功能是将数据集返回的报表总页数、总条数更新到参数面板的控件里，然后在查询时作为参数传递到 sql 里获取报表数据。

2.6 添加效果事件

点击菜单「模板>模板 Web 属性>分页预览设置」，添加报表「加载结束」事件，如下图所示：

JavaScript代码如下：

afterload();

若想设置鼠标滑动变色的效果，可以再添加一个「加载结束」事件， JavaScript 代码如下：

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

若想设置页面居中的效果，可以再添加一个加载结束事件， JavaScript 代码如下：

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

2.7 效果预览

2.7.1 PC 端

保存报表，点击分页预览，报表效果如 1.1 节所示。

2.7.2 移动端

不支持移动端

已完成模板可参考：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现动态设置每页显示固定行数.cpt

点击下载模板：JS实现动态设置每页显示固定行数.cpt