轻松实现大数据量下的折叠报表

         树状报表是比较常见的一类报表，不但使得终端用户查看数据更加方便，并且数据展现更具层次感，因此也就更加直观易懂。集智数据平台当然也会毫无吝啬的提供给客户使用。并且，重要的是平台提供的折叠报表，更好的满足了针对大数据量的性能需求。

解决方案及部署过程

一、实现功能：

折叠报表在展开下一节点的时候，实现动态从后台数据库中取数；一旦一个节点的下一级节点的数据被取到后，该节点再次展开和折叠则不会再次请求数据

 

二、程序用法

1、将样式文件和js文件添加到应用中

将压缩包里js文件夹和style文件夹中文件放到应用中

2、在展现折叠报表页面引入样式文件和js文件

在展现折叠报表的页面引入折叠报表相关的js（压缩包下js文件夹下的所有文件）和css样式(压缩包下style文件夹下)文件，如：

 

<!– 引入必要的js和css –>

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript” src=”js/report_tree.js”></script>

<script type=”text/javascript” src=”js/Base64.js”></script>

<link rel=”stylesheet” type=”text/css” href=”style/treeReport/default.css”>

<!– 引入必要的js和css end –>

 

3、调用js方法

在展现折叠报表页面需要引入初始化折叠报表方法，代码如下：

<script type=”text/javascript”>

         //定义等待图片路径

         var waitImagePath = “style/treeReport/images/loading.gif”;

         // 初始化折叠报表

         $(document).ready(function(){

                   ReportTreeManager.init(‘report1′,’<%=request.getContextPath()%>’,'<%=params.toString()%>’);

         });

</script>

 

4、将折叠报表使用的jar文件puckerReport.jar、json.jar引入到项目中

5、在web.xml文件中添加servlet定义，代码如下

  <servlet>

         <servlet-name>treeReportServlet</servlet-name>

         <servlet-class>com.runqianapp.report.view.TreeReportServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>treeReportServlet</servlet-name>

    <url-pattern>/treeReportServlet</url-pattern>

  </servlet-mapping>

三、报表制作

该折叠报表有几级折叠，就应该做几张报表，每张报表是一个需要折叠的级

在需要“展开/折叠“的单元格的HTML事件中添加如下代码：“iddata=’”+value()+”‘ piddata=” nextReport=’collapse_report_lv2.raq’”

 

注意：

1、第一级报表是通过展现折叠报表的jsp页面的报表展现标签引入的

2、除第一级报表外，其他每一级报表都有一个参数名为“parent”的参数，表示上一级

3、最后一级报表没有“展开/折叠“的单元格，则在第一个显示数据的单元格的HTML事件中添加如下代码：“iddata=’”+value()+”‘ piddata=” “，因为它是最后一级，没有下一级报表

4、报表所需的参数在每一级报表中都得使用

 

四、展开/折叠图片的使用

这两个图片的定义是在default.css文件中的，代码如下：

td.plus{background-image:url(‘images/plus.png’)}//已折叠图片

td.minus{background-image:url(‘images/minus.png’)}//已展开图片

若需更改此图片，在此处修改即可

 

五、等待图片的使用

为了方便更改等待图片，等待图片的路径定义在jsp页面上的javascript标签内，代码如下：

var waitImagePath = “style/treeReport/images/loading.gif”;

如需更改等待图片，修改此处代码即可