jQuery实现润乾报表的折叠效果（可填报）

一：折叠报表两种实现方案

折叠报表在BS项目有着广泛的应用，在公司内部，润乾报表在解决折叠报表时通常有两种方案：

1）  利用润乾报表的隐藏行属性，通过传递参数刷新报表实现。

2）  通过jQuery的show(),hide()方法对报表进行tr的显示，隐藏操作。

二：两种折叠方案的对比

第一种折叠方案:

优点：js方法比较简单。

缺点：无法进行填报，每次折叠打开的操作都是对报表的刷新重运算，效率比较低。适合小数据量的展示报表。

第二种折叠方案：

优点：利用jQuery的方法对报表对象初始化以及tr的显示和隐藏，折叠打开的操作不需要刷新计算，故可填报，性能比较高。

缺点：需要学习jQuery，对js的要求比较高，第一次展示是对报表的运算以及初始化，故数据量太大第一次加载也会比较慢。

 

近期在给客户解决问题时，经常会遇到折叠报表的性能问题，还有的客户希望报表即可填报又可折叠。发现大家普遍还在使用第一种折叠报表的方案，故请教了郑谷川，希望通过文章，推广jQuery实现折叠报表的方案。

三：JQuery实现润乾的折叠报表

1：制作一张填报表，如下图所示：

其中，B3的左主格为A2，C4左主格为B3

2：设置A2，B3，C4单元格的html事件

A2单元格："iddata='"+value()+"' piddata=''"

B3单元格："iddata='"+value()+"' piddata='"+A2+"'"

C4单元格："iddata='"+value()+"' piddata='"+B3+"'"

3：初始化报表数

var ReportTreeManager = new function(){

         this.version = '1.0';

         this.map = {};

         this.ge = function(id){

                            return document.getElementById(id);

         };

         this.get = function(id){

                   if(this.map.hasOwnProperty(id)) return this.map[id];

                   else return null;

         };

         this.put = function(id, tree){

                   this.map[id] = tree;

         };

         /**

          * 初始化报表树

          */

         this.init = function(id){

                   var t = this.ge(id);

                   var tree &