FineReport改写工具栏实现sql分页功能

科技 06-27 来源：程序猿阿星

一、问题描述

当报表展示的数据量比较多的时候，有两种办法可以有效提升预览速度。

一种情况是sql查询速度比较快，页面展示比较慢。此时直接使用帆软内置的分页预览方式就可以大幅提升预览速度。

另一种情况是，sql查询本身就比较慢。这种就需要通过sql分页来提升预览速度。

帆软本身提供行式引擎来解决这种问题，不过使用行式引擎有其自身的局限性，具体详情可以查看帆软帮助文档：启用行式引擎执行层式报表- FineReport帮助文档 - 全面的报表使用教程和学习资料

二、实现效果

自定义帆软的工具栏，使用js来实现对应的翻页功能，并且提供两个参数来供sql调用，能满足所有数据库sql分页的使用场景。最终效果如下：

三、操作步骤

1、创建分页sql

sql语句如下：

select * from 销量 order by 销量
${if(len(pageno)=0,"","limit "+((pageno-1)*pagesize)+","+pagesize)}

同时创建一个计算总行数和总页数的sql，需要注意，数据集名称命名为pagetool，总行数重新名为totalcnt，总页数重命名为totalpage，后面js中调用会用到。

select count(1) as totalcnt,
ceiling(count(1)*1.0/${pagesize}) as totalpage
from 销量

2、报表设计

报表设计没有限制，根据实际项目需求设计。这里的设计如下：

3、引入js文件

点击工具栏进行分页的时候，需要向页面传递参数，并刷新页面。这里采用动态参数传参的方式，因为多处自定义事件均使用到传参，因此将它定义成一个函数，以实现复用。代码如下：

var reload=function(param){
     FR.ajax({        
	url:'/webroot/decision/view/report?op=fr_dialog&cmd=parameters_dynamic',        
                type:'POST',        
	data:param,
	headers: {sessionID:FR.SessionMgr.getSessionID()},
	complete:function(res, status){            
		if(window.FR && FR.Chart && FR.Chart.WebUtils){                
			FR.Chart.WebUtils.clearCharts();            }            
			if(window.FR && FR.destroyDialog) {                
				FR.destroyDialog();            }            
				_g().loadContentPane();        
	}    
	})
}

将其保存为reload.js文件，并在模板>模板web属性>引用JavaScript处将其导入，如下所示：

5、自定义工具栏

考虑到实现效果后可以自定义每页显示的条数，导致报表展示的页面大小无法估计。因此使用填报预览的方式来实现。

1）打开模板>模板web属性>填报页面设置，选择为该模板单独设置，将默认的工具栏按钮全部清除掉，然后依次添加两个自定义按钮，一个邮件按钮，四个自定义按钮，一个PDF按钮。如下所示：

2）为自定义按钮重命名并添加自定义事件

如图所示，六个自定义的重命名分别为

①重命名：首页，自定义事件如下：

reload({"pageno":1})

②重命名：上一页，自定义事件如下：

var pageno = FR.remoteEvaluate("=$pageno");
reload({"pageno":pageno-1});

③重命名：下一页，自定义事件如下：

var pageno = FR.remoteEvaluate("=$pageno");
reload({"pageno":pageno*1+1})

④重命名：末页，自定义事件如下：

var totalpage = FR.remoteEvaluate("=value('pagetool',2,1)");
reload({"pageno":totalpage});

⑤重命名：导出Excel，自定义事件如下：

var url = "${servletURL}?viewlet=${reportName}&format=excel&pageno=";
window.location=encodeURI(encodeURI(url));

⑥重命名：数据总量，无自定义事件。

5、添加加载结束事件

在模板>模板web属性>填报页面设置>为该模板单独设置中，添加加载结束事件，如下图所示

其中代码如下：

setTimeout(function(){
	// 定义变量获取总行数、总页数、页码、每页显示行数
	var totalcnt = FR.remoteEvaluate("=value('pagetool',1,1)");
	var totalpage = FR.remoteEvaluate("=value('pagetool',2,1)");
	var pageno = FR.remoteEvaluate("=$pageno");
	var pagesize = FR.remoteEvaluate("=$pagesize");

     //定义当前页和每页显示行数的html代码
	var currentpageStr = "";
	var pagesizeStr = "每页显示条数：";

     //将email按钮和pdf按钮替换成当前页和每页显示行数，并设置按钮属性
	$("div[widgetname=Email]").replaceWith(currentpageStr); 
	$("div[widgetname=PDF]").replaceWith(pagesizeStr); 
     $("#currentpage").val(pageno);
     $("#currentpage").attr("max",totalpage);
     $("#totalpage").text(" / "+totalpage);
     $("#pagesize").val(pagesize);
	_g().toolbar.options.items[6].setValue("数据总量："+totalcnt);

	//当前页的值有变化时触发的操作
	$("#currentpage").change(function(){
		var val = $(this).val();
		if(val <1 || val>totalpage){
			$(this).val(pageno);
			}else{
				reload({"pageno":val})
				}	
		})

	//每页显示行数的值有变化时触发的操作
	$("#pagesize").change(function(){
		var val = $(this).val();
		if(val <10 || val>100){
			$(this).val(pagesize);
			}else{
				reload({"pagesize":val})
				}	
		})

     //当页码为1时，首页和上一页不可用
     if(pageno == 1){
		_g().toolbar.options.items[0].setEnable(false);
		_g().toolbar.options.items[1].setEnable(false);
		}
  
	//当页码等于最后一页时，下一页和末页不可用
	if(pageno == totalpage){
		_g().toolbar.options.items[3].setEnable(false);
		_g().toolbar.options.items[4].setEnable(false);
		}
	},10)