FineReport层式报表解决大数据集展示问题攻略

本文涉及的产品
云原生大数据计算服务 MaxCompute,5000CU*H 100GB 3个月
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
简介:

本文以填报报表为例,通过分页的方式,来解决大数据集展示的问题。

实现的思想就是通过在SQL里筛选部分数据库数据,以达到浏览器可以合理的展示报表页面。(数据分段,语句我这采用的是MYSQL,如果要用其他数据库,请查看FineReport帮助文档)

步骤一:打开fenye.cpt文件。

模板界面如下

 

两个ds,和一部分数据,及隐藏的一行。

 

隐藏一行内容如下

 

这里数据的功能会在下面说起。

 

ds1 里的内容如下

语句内容 SELECT * from aaa limit ${f},${p}

目的是从第${f}跳开始,选择${p}数据(这个$p就是展示的页数,$f的计算可以下面公式($page-1)*$p,mysql的limit的偏移量是从0开始)。

 

在模板参数里,我设置了他们的默认值

 

$P=20

$page=1;

这个和全局参数同理,在模板预览的时候是看不到数据的,必须到展示页面的时候参数才通过url传进来。

 

ds2里的内容如下

 

这个语句就比较简单就是求数据总数再除以每页页数,就能得到总页数。

 

报表主体

 

第一行的数据分别是前一页,后一页,总页数和当前页以及一个/,用来在工具栏里展示上一页和下一页等操作使用的,这里正常是不显示的,所以我们先屏蔽了(隐藏)。其他的就是用户数据的展示了。

 

为了展示报表能和我们正常报表一样,我们还需要做什么?

 

这里就需要写代码能实现上图的效果了。

 

点开填报预览的齿轮

 

可以看到我们这里用了7个自定义按钮和一个加载结束事件

加载结束事件的代码如下:

var toolbar = contentPane.toolbar;

var items = toolbar.options.items;

var customButton=items[2];//JQUERY取我们的工具栏上的按钮.items[2]代表的是第三个,也就是那个显示成文本框按钮。

var inner = customButton.$table;

var btnWrapper = $("em", inner);

btnWrapper.html("<input data-role='none' type='text'  class='fr-texteditor' style='width: 42px; height: 16px; text-align: center;'>");

//修正这个按钮的属性,让它变成文本类型,居中,鼠标放上次图标是编辑状态。

var cellValue = contentPane.curLGP.getCellValue("D1");//获取D1单元格的值就是page,也就是当前页。

var $input = $("input", btnWrapper);

$input.val(cellValue);//给这个文本控件复制,用的是JQUERY的方法,可以COPY。

var total=contentPane.curLGP.getCellValue("C1");

if (total>parseInt(total)){total=parseInt(total)+1;

}

contentPane.toolbar.options.items[4].setText(total);

//把总页数显示在第5个控件上,因为这个数值可能是小数,所以判断下要不要加一处理。

contentPane.toolbar.options.items[3].setText(contentPane.curLGP.getCellValue("E1"));

//把斜线写在第4个控件上。

7个自定义按钮:

第一个首页:

代码如下:

window.location.href="${servletURL}?reportlet=fenye.cpt&op=write&page=1";//链接到fenye.cpt,page 参数=1,代表第一页。

第二个上一页:

代码如下:

var page= $("tr[tridx=0]","div.content-container").children().eq(0).html();  //取第一行第一个单元格内容。

if(page==0)

{

this.setEnable(false);

alert("页面超出指定的范围");

}

else

window.location.href="${servletURL}?reportlet=fenye.cpt&op=write&page="+page//如果没有小于1就正常跳转,否则显示页面超过指定的范围,这个控件设置不可以使用。

第三个可以跳转的当前页:

  var toolbar = contentPane.toolbar;

        var items = toolbar.options.items;

        var customButton=items[2];

        var inner = customButton.$table;

        var btnWrapper = $("em", inner);

var $input = $("input", btnWrapper);

//取这个控件

$input.blur(function(){

  var toolbar = contentPane.toolbar;

        var items = toolbar.options.items;

        var customButton=items[2];

        var inner = customButton.$table;

        var btnWrapper = $("em", inner);

var $input = $("input", btnWrapper);

var page=$input.val();

var total=$("tr[tridx=0]","div.content-container").children().eq(2).html(); 

if (total>parseInt(total)){total=parseInt(total)+1;

}

if(parseInt(page) > parseInt(total) || parseInt(page) < parseInt(1) )

{

alert("你输出的页数不再指定范围内");

}

else

window.location.href="${servletURL}?reportlet=fenye.cpt&op=write&page="+page

});

//失去焦点后输入的值是不是在指定的范围内,如果在跳转到指定页面,就在else后面的URL,否则输出你的输出页面不对提示。失去焦点代表就是点击其他地方或者点击TAB键。

 

第四个斜线:
这个在加载时间里处理了。这边不需要处理。
第五个总页数:
这个在加载时间里处理了。这边不需要处理。
第六个下一页:
var page= $("tr[tridx=0]","div.content-container").children().eq(1).html();  
var total=$("tr[tridx=0]","div.content-container").children().eq(2).html(); 
//JQURUY取下一页和总页数
      if (total>parseInt(total)){total=parseInt(total)+1;
     }
//判断总页数是不是整数,不是加一
      if(parseInt(page) > parseInt(total))
  {
this.setEnable(false);
alert("页数超出指定范围内");
}
else
window.location.href="${servletURL}?reportlet=fenye.cpt&op=write&page="+page
//如果下一页在这个范围就跳转到那里


这个控件不可用,输出出错。
第七个末页:
代码如下:
var total=$("tr[tridx=0]","div.content-container").children().eq(2).html();  
//取总页数。
if (total>parseInt(total)){total=parseInt(total)+1;
}
window.location.href="${servletURL}?reportlet=fenye.cpt&op=write&page="+total
//判断总页数是不是整数,不是加一,并跳转到最后一页。
显示控件的名称需要在别名里添加下



本文转自 雄霸天下啦 51CTO博客,原文链接:http://blog.51cto.com/10549520/1677428,如需转载请自行联系原作者
相关实践学习
基于MaxCompute的热门话题分析
本实验围绕社交用户发布的文章做了详尽的分析,通过分析能得到用户群体年龄分布,性别分布,地理位置分布,以及热门话题的热度。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps&nbsp;
相关文章
|
存储 数据可视化 大数据
彻底搞定数据产品选型-报表平台、BI平台、大数据平台、数据中台一网打尽
彻底搞定数据产品选型-报表平台、BI平台、大数据平台、数据中台一网打尽
|
XML 存储 安全
Excel电子表格的PHP类库:PHP_XLSXWriter(大数据量报表、后台运行、浏览器下载)
Excel电子表格的PHP类库:PHP_XLSXWriter(大数据量报表、后台运行、浏览器下载)
267 0
|
大数据 数据挖掘 BI
【实验】阿里云大数据助理工程师认证(ACA)- QuickBI报表制作(下)
【实验】阿里云大数据助理工程师认证(ACA)- QuickBI报表制作(下)
264 0
【实验】阿里云大数据助理工程师认证(ACA)- QuickBI报表制作(下)
|
Web App开发 分布式计算 数据可视化
【实验】阿里云大数据助理工程师认证(ACA)- QuickBI报表制作(上)
【实验】阿里云大数据助理工程师认证(ACA)- QuickBI报表制作
270 0
【实验】阿里云大数据助理工程师认证(ACA)- QuickBI报表制作(上)
|
BI 关系型数据库 数据库
银行业大数据量清单报表案例
银行数据查询业务中,经常会碰到数据量很大的清单报表。由于用户输入的查询条件可能很宽泛,因此会从数据库中查出几百上千万甚至过亿行的记录,比如银行流水记录;为了避免内存溢出,一般都会使用关系型数据库的分页机制来做,但结果往往也不尽人意;有些情况下甚至底层采用了非关系型数据库,这更会加剧了问题的复杂度。
1250 0
|
12天前
|
存储 机器学习/深度学习 分布式计算
大数据技术——解锁数据的力量,引领未来趋势
【10月更文挑战第5天】大数据技术——解锁数据的力量,引领未来趋势
|
13天前
|
分布式计算 关系型数据库 MySQL
大数据-88 Spark 集群 案例学习 Spark Scala 案例 SuperWordCount 计算结果数据写入MySQL
大数据-88 Spark 集群 案例学习 Spark Scala 案例 SuperWordCount 计算结果数据写入MySQL
38 3
|
12天前
|
SQL 消息中间件 大数据
大数据-159 Apache Kylin 构建Cube 准备和测试数据(一)
大数据-159 Apache Kylin 构建Cube 准备和测试数据(一)
30 1
|
12天前
|
SQL 大数据 Apache
大数据-159 Apache Kylin 构建Cube 准备和测试数据(二)
大数据-159 Apache Kylin 构建Cube 准备和测试数据(二)
43 1