报表知识库
我要提问

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

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


解决方案及部署方法


问题背景


树状报表是比较常见的一类报表,不但使得终端用户查看数据更加方便,并且数据展现更具层次感,因此也就更加直观易懂。


 



   


如此好的报表类型,也是较多用户的需求。集智数据平台当然也会毫无吝啬的提供给客户使用。并且,重要的是平台提供的折叠报表,更好的满足了针对大数据量的性能需求。


解决方案及部署过程


一、实现功能:


 


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


 


二、程序用法


 


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


 


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


 


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


 


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


 


<!– 引入必要的jscss –>


<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”>


<!– 引入必要的jscss 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.jarjson.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”;


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


 


总结


通过上述操作,就可以完成折叠报表的制作,帮助用户更方便、更直观、更高效的查看大数据量的报表。


标签: