關於潤乾報表列摺疊的使用及製表方法

        潤乾報表通過JSP腳本可以實現報表中行列的自由伸縮，從而達到界面更加美觀的效果，主要利用到JAVA的隱藏及顯示功能。

         首先，在頁面加載時，初始化報表

$(document).ready(function(){

     ColCollapseReport.init();

                  });

        然後，爲表中字段添加keycell屬性、h_hidden屬性以及pcid屬性。

        keycell 屬性的定義：摺疊後剩餘的那一列的表頭單元格即爲keycell，如圖：

             將“廈門”單元格的keycell屬性設爲true即可

 

           h_hidden屬性定義：需要隱藏掉的單元格，設置h_hidden=true 屬性，如圖：

                    

           “海口”，“深圳”單元格的h_hidden =true，執行收縮語句時，這些列及其父列和子列都要一起收縮。

 

          pcid 屬性定義:此屬性用來標識列所屬分組信息，也就是確定其父節點跟子節點的重要參數，如圖：

             

海口，深圳，廈門的pcid = 華南，成都，重慶的pcid=西南。

 

JAVA實現語句如下：

var ColCollapseReport = new function(){
 this.version = '1.0';
    this.init = function(table){
  tableName = table;
  initColGroup(table);
  initColGroupAttr(table);
  deletedColNum = new Array();
  //查找fatherColID 長度爲一的tr
  var minLength = getBeginTr();
  $(document).find("td[h_hidden=true]").each(function(){
   var fatherid = $(this).attr("pcid");
   if(fatherid.split("-").length==minLength){
    beginTrIndex = $(this).parent().attr("rowIndex");
    var cellValue = $(this).html();
    var searchParam = fatherid+"-"+cellValue;
    //隱藏所有下級
    $(document).find("td[pcid^="+searchParam+"]").each(function(){
     //alert($(this).attr("cellIndex"));
     $(this).hide();
     
    });
    //處理colGroup
    deleteColGroup($(this).attr("collapse_index"),table);
    //隱藏本身
    $(this).hide();    
   }
  });
  $(document).find("td[keycell]").each(function(){
   //添加樣式，標識出展開收縮狀態，以及記錄是否展開
   if($(this).parent().attr("rowIndex")==beginTrIndex){
    delFatherColSpan($(this));
   }
  });
  
  initKeyCell();
  initFlag = "true";
 };

function initColGroupAttr(table){
 var headrows=0;
 var tdjson={};
 $("#"+$(table).attr("id")+"_topdiv").children().children().children("tr").each(function(){
  var x=0;
  var point=0;
  headrows++;
  $(this).children("td").each(function(){
   var dis=$(this).css("display");
   if(dis!="none"){
    //$(this).css("word-wrap","break-word");
    //$(this).attr("head","yes");
    try{
     eval("var cs=tdjson.x"+x+".colSpan");
     eval("var rs=tdjson.x"+x+".rowSpan");
     while(rs>1){
      rs--;
      eval("tdjson.x"+x+".rowSpan="+rs);
      x+=cs;
      eval("var cs=tdjson.x"+x+".colSpan");
      eval("var rs=tdjson.x"+x+".rowSpan");
     }
     eval("tdjson.x"+x+".rowSpan="+$(this).attr("rowSpan"));
     eval("tdjson.x"+x+".colSpan="+$(this).attr("colSpan"));
    }catch(e){
     eval("tdjson.x"+x+"={}");
     eval("tdjson.x"+x+".rowSpan="+$(this).attr("rowSpan"));
     eval("tdjson.x"+x+".colSpan="+$(this).attr("colSpan"));
    }
    //var str=$(this).html();
    //str=str.replace(new RegExp("<BR>","gm"),"");
    //$(this).html(str);
    $(this).attr("collapse_index",x);
    x+=$(this).attr("colSpan");
   }
  });
 })
 tdjson={};
 $("#"+table).children().children("tr").each(function(){
  var x=0;
  var point=0;
  $(this).children("td").each(function(){
   var dis=$(this).css("display");
   if(dis!="none"){
    //$(this).css("word-wrap","break-word");
    //$(this).attr("head","no");
    try{
     eval("var cs=tdjson.x"+x+".colSpan");
     eval("var rs=tdjson.x"+x+".rowSpan");    
     while(rs>1){
      rs--;
      eval("tdjson.x"+x+".rowSpan="+rs);
      x+=cs;
      eval("var cs=tdjson.x"+x+".colSpan");
      eval("var rs=tdjson.x"+x+".rowSpan");
     }
     var dis=$(this).css("display");
     eval("tdjson.x"+x+".rowSpan="+$(this).attr("rowSpan"));
     eval("tdjson.x"+x+".colSpan="+$(this).attr("colSpan"));
    }catch(e){
     eval("tdjson.x"+x+"={}");
     eval("tdjson.x"+x+".rowSpan="+$(this).attr("rowSpan"));
     eval("tdjson.x"+x+".colSpan="+$(this).attr("colSpan"));
    }
    //var str=$(this).html();
    //str=str.replace(new RegExp("<BR>","gm"),"");
    //$(this).html(str);
    $(this).attr("collapse_index",x);
    x+=$(this).attr("colSpan");
   }
  });
 })
}

function initColGroup(table){
 var i = 0;
 $("#"+table).find("col").each(function(){
  $(this).attr("colgroup_index",i);
  i++
 });
}

// 收縮時刪除colgroup的<col>
function deleteColGroup(index){
 var colObject = $("#"+tableName).find("col[colgroup_index="+index+"]");
 var endColObject = colObject.next();
 var colInfo = {};
 var tableWidth = parseInt($("#"+tableName).css("width"));
 colInfo['index'] = index;
 colInfo['width'] = colObject.css("width");
 var newTableWidth = tableWidth - parseInt(colObject.css("width"));
 colObject.remove();
 endColObject.remove();

    $("#"+tableName).css("width",newTableWidth+"px");
 if(initFlag=="false"){
  deletedColNum.push(colInfo);
 }else{
  //更新width信息
  for(var i=0;i<deletedColNum.length;i++){
   if(deletedColNum[i].index == index){
    deletedColNum[i].width = colObject.css("width");
   }
  }
 }
 
}

//展開是添加colGroup的<col>
function addColGroup(index){
 var maxIndex = 0;
 $("#"+tableName).find("col").each(function(){
  var tempIndex = $(this).attr("colgroup_index");
  if(tempIndex<index&&tempIndex>maxIndex){
   maxIndex = tempIndex;
  }
 });
 //在maxIndex後面添加col
 var width = getColInfo(index);
 var newCol = "<col style=\"width:"+width+";\" colgroup_index=\""+index+"\"></col>";
 $("#"+tableName).find("col[colgroup_index="+maxIndex+"]").next().after(newCol);
 var tableWidth = parseInt($("#"+tableName).css("width"));
 var newTableWidth = tableWidth - parseInt(width);
 $("#"+tableName).css("width",newTableWidth+"px");
}

//獲取某index對應的colgroup信息
function getColInfo(index){
 for(var i=0;i<deletedColNum.length;i++){
  if(deletedColNum[i].index==index){
   return deletedColNum[i].width;
  }
 }
}
 //初始化keycell
 function initKeyCell(){
  $(document).find("td[keycell]").each(function(){
   //添加樣式，標識出展開收縮狀態，以及記錄是否展開
   if($(this).parent().attr("rowIndex")==beginTrIndex){
    $(this).css('cursor','pointer');
    $(this).addClass('button plus');
    $(this).attr("hasCollapse",'true');
   }else{
    $(this).css('cursor','pointer');
    $(this).addClass('button minus');
    $(this).attr("hasCollapse","false");
   }
   $(this).bind('click',function(){
    colCollapseHandler($(this));
   });
  });
 }

 //當一列收縮時，將父級tr中對應的td的colspan也減去
 function delFatherColSpan(td){
  var delColSpan = getAddOrDelColSpan(td);
  var tr = td.parent().get(0);
  var parentTr = $(tr).parent().find("tr").get(tr.rowIndex-1);
  var fatherIdArr = td.attr("pcid").split("-");
  var cellFatherID = fatherIdArr[fatherIdArr.length-1];
  var ffatherID = getFFatherID(fatherIdArr);
  $(parentTr).find("td").each(function(){
   if(ffatherID.length>0){
    if($(this).html()==cellFatherID&&$(this).attr("pcid")==ffatherID){
     var newColSpan = $(this).attr("colSpan")-delColSpan;
     $(this).attr("colSpan",newColSpan);
     if(fatherIdArr.length>1){
      delAotherTrColSpan(parentTr,delColSpan,ffatherID);
     }
    }
   }else{
    if($(this).html()==cellFatherID){
     var newColSpan = $(this).attr("colSpan")-delColSpan;
     $(this).attr("colSpan",newColSpan);
    }
   }
  });
 }

 //當一列展開時，將父級tr中對應的td的colspan也增加，添加的colSpan是同級非keycell的rospan之和
 function addFatherColSpan(td){
  var addColSpan = getAddOrDelColSpan(td);
  var tr = td.parent().get(0);
  var parentTr = $(tr).parent().find("tr").get(tr.rowIndex-1);
  var fatherIdArr = td.attr("pcid").split("-");
  var cellFatherID = fatherIdArr[fatherIdArr.length-1];
  var ffatherID = getFFatherID(fatherIdArr);
  $(parentTr).find("td").each(function(){
   if(ffatherID.length>0){ //parentTr還有父級
    if($(this).html()==cellFatherID&&$(this).attr("pcid")==ffatherID){
     var newColSpan = $(this).attr("colSpan")+addColSpan;
     $(this).attr("colSpan",newColSpan);
     if(fatherIdArr.length>1){
      //delFatherColSpan($(this));
      addAotherTrColSpan(parentTr,addColSpan,ffatherID);
     }
    }
   }else{ //parentTr已經是最高一級的分組

    if($(this).html()==cellFatherID){
     var newColSpan = $(this).attr("colSpan")+addColSpan;
     $(this).attr("colSpan",newColSpan);
    }
   }
  });
 }
   
 function addAotherTrColSpan(tr,addColSpan,ffatherID){
  var parentTr = $(tr).parent().find("tr").get(tr.rowIndex-1);
  var fatherIdArr = ffatherID.split("-");
  var cellFatherID = fatherIdArr[fatherIdArr.length-1];
  var ffatherID = getFFatherID(fatherIdArr);
   $(parentTr).find("td").each(function(){
   if(ffatherID.length>0){ //parentTr還有父級
    if($(this).html()==cellFatherID&&$(this).attr("pcid")==ffatherID){
     var newColSpan = $(this).attr("colSpan")+addColSpan;
     $(this).attr("colSpan",newColSpan);
     if(fatherIdArr.length>1){
      //delFatherColSpan($(this));
      addAotherTrColSpan(parentTr,addColSpan,ffatherID);
     }
    }
   }else{ //parentTr已經是最高一級的分組
    if($(this).html()==cellFatherID){
     var newColSpan = $(this).attr("colSpan")+addColSpan;
     $(this).attr("colSpan",newColSpan);
    }
   }
  });
 }

 function delAotherTrColSpan(tr,delColSpan,ffatherID){
  var parentTr = $(tr).parent().find("tr").get(tr.rowIndex-1);
  var fatherIdArr = ffatherID.split("-");
  var cellFatherID = fatherIdArr[fatherIdArr.length-1];
  var ffatherID = getFFatherID(fatherIdArr);
   $(parentTr).find("td").each(function(){
   if(ffatherID.length>0){ //parentTr還有父級
    if($(this).html()==cellFatherID&&$(this).attr("pcid")==ffatherID){
     var newColSpan = $(this).attr("colSpan")-delColSpan;
     $(this).attr("colSpan",newColSpan);
     if(fatherIdArr.length>1){
      //delFatherColSpan($(this));
      delAotherTrColSpan(parentTr,delColSpan,ffatherID);
     }
    }
   }else{ //parentTr已經是最高一級的分組
    if($(this).html()==cellFatherID){
     var newColSpan = $(this).attr("colSpan")-delColSpan;
     $(this).attr("colSpan",newColSpan);
    }
   }
  });
 }

 function getAddOrDelColSpan(td){
  var pcid = td.attr("pcid");
  var tr = td.parent().get(0);
  var addColSpan = 0;
  $(tr).find("td[pcid="+pcid+"]").each(function(){
   if($(this).attr("keycell")!="true"){
    addColSpan = addColSpan+$(this).attr("colSpan");
   }
  });
  return addColSpan;
 }

 //查找父級節點的父級節點
 function getFFatherID(fatherIdArr){
  var ffatherID = "";
  if(fatherIdArr.length>1){
   for(var i=0;i<fatherIdArr.length-1;i++){
    ffatherID = ffatherID + fatherIdArr[i]+"-";
   }
   ffatherID = ffatherID.substring(0,ffatherID.length-1);
  }
  return ffatherID;
 }

 //從上到下查找從哪一行開始隱藏
 function getBeginTr(){
  var minLength = $($(document).find("td[h_hidden=true]")[0]).attr("pcid").split("-").length;
  $(document).find("td[h_hidden=true]").each(function(){
   var fatherid = $(this).attr("pcid");
   var length =  fatherid.split("-").length;
   if(length<minLength){
    minLength = length;
   }
  });
  return minLength;
 }
 
 //keycell的單擊事件，展開/收縮
 function colCollapseHandler(keycell){
  if(keycell.attr("hasCollapse")=="true"){//已經收縮，則展開
   keycell.attr("hasCollapse","false");
   keycell.removeClass('button plus');
   keycell.addClass('button minus');
   plusCols(keycell);
  }else{ //已展開，則收縮
   keycell.attr("hasCollapse","true");
   keycell.removeClass('button minus');
   keycell.addClass('button plus');
   minusCols(keycell);
  }
 }

 //展開已經收縮的列
 function plusCols(keycell){
  var pcid = keycell.attr("pcid");
  $(document).find("td[pcid="+pcid+"]").each(function(){
   if($(this).attr('h_hidden')=="true"){
    addColGroup($(this).attr("collapse_index"));
   }
  });

  $(document).find("td[pcid^="+pcid+"]").each(function(){
   $(this).show();
   //alert($(this).attr("pcid"));
   //addFatherColSpan($(this));
  });
  addFatherColSpan(keycell);
 }

 //收起已經展開的列
 function minusCols(keycell){
  var pcid = keycell.attr("pcid");
  //隱藏所有下級
  $(document).find("td[h_hidden=true]").each(function(){
   if($(this).attr('pcid')==pcid){
    //隱藏所有下級
    var searchParam = pcid+"-"+$(this).html();
    $(document).find("td[pcid^="+searchParam+"]").each(function(){
     $(this).hide();
    });
    deleteColGroup($(this).attr("collapse_index"));
    $(this).hide();
   }
  });
  delFatherColSpan(keycell);
 }
 
}