JS改写工具栏实现sql分页

楼主
我是社区第2060109位番薯,欢迎点我头像关注我哦~

本文方案由社区用户提供

1. 概述

1.1 应用场景

内置的分页预览页码参数无法应用于sql中,多数据集实现层式报表 中定义上下页需要在单元格中取数,并且工具栏太简单,缺少了首页、末页、导出等功能(导出仅能导出当前页)。

1.2 实现效果

对整个工具栏重新定义,提供给sql两个参数,当前页码:pageno,每页显示行数:pagesize。点击导出时可以导出所有数据。

2. 示例

2.1创建数据集

新建数据集查询ds1,sql语句如下:

select * from 销量 

${if(len(pageno)=0,"","limit "+((pageno-1)*pagesize)+","+pagesize)}

新建数据集查询pagetool,sql语句如下:

select count(1) as totalcnt,

ceiling(count(1)*1.0/${pagesize}) as totalpage

from 销量

 

注:pagetool这个数据集名称还有totalcnt和totalpage这两个别名不要修改,后面js中需要调用。

2.2 单元格设计

B3单元格中的公式为 ($pageno - 1) * $pagesize + seq(),条件属性为隔行变色。

2.3 模板参数设置

添加两个模板参数

模板参数名称 默认值
pageno 1
pagesize 10

2.4 引入js文件

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处将其导入,如下所示:

2.5 自定义工具栏

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

2.6 设置自定义按钮的属性

第一个自定义按钮重命名为首页,自定义事件如下:

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

第六个自定义按钮重命名为数据总量,无自定义事件。

2.7 添加加载结束事件

代码如下:

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");

	var currentpageStr = "";
	var pagesizeStr = "每页显示条数:";

	$("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})
				}	
		})

     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)

 

2.8 效果预览

保存报表,选择填报预览,效果如下图所示:

 

 

3. 模板下载

注:模板下载后需根据2.4小节引入JS文件

改写工具栏实现sql分页模板.zip (3.46 K)

 

 

 

 

 

 

 

 

 

 

 

 

 

分享扩散:

沙发
发表于 2023-10-9 14:51:33
参与人数 +1 F豆 +300 理由
LazySheep + 300 太棒了,给你32个赞,么么哒

查看全部评分

板凳
发表于 2023-10-9 16:28:36
我之前也开发过一个类似的,实现了带参数导出。
地板
发表于 2023-10-10 08:29:32
前端分页啊,这种设计性能会很差的
5楼
发表于 2023-10-17 14:14:29
我开发过一个类似的分页,只不过传值给sql
6楼
发表于 2024-1-16 16:41:11
导出Excel后,序号从-9开始,有办法解决吗
7楼
发表于 2024-9-12 17:28:06
怎么跳转指定页面呢
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部 返回列表