Javascript Expand and Colapse - Agrupar e Desagrupar - Part 1

Esse post já está preparado tem um tempo, mas não ficou muito bom.

Outra funcionalidade muito solicitada é o famoso "Agrupar" do Excel, que facilita a visão diminuindo a poluição no relatório, pois ele agrupa varias linhas, e expande quando solicitado.

É como a estrutura de diretório do Windows, clique no "+"(mais) e a árvore abre.

Pois bem, existe um modo de se fazer isso no Cognos graças ao Mr. Javascript, abençoado seja o inventor.

A utilização é muito simples, e a lógica aplicada também, então vamos a explicação técnica.

No HTML o elemento TABLE possui os elementos TR, que são as linhas da tabela - table row.
Esses elementos TR por sua vez possuem um atributo chamado STYLE, o qual possui uma propriedade chamada DISPLAY.

table.tr.style.display, ok?

Essa propriedade define se um elemento estará visível ou não na tela, apesar de ter sido carregado.
Então DISPLAY = 'NONE' significa que o elemento estará oculto e DISPLAY = 'BLOCK'... visível.

A função consiste basicamente em ler todas as linhas da tabela e atribuir a propriedade não visível ou visivel, isso dependerá de uma variável do preenchimento definido na variavél INDENT_SIZE.

A função percorre todas as linhas abaixo da linha clicada verificando se existe uma imagem dentro da primeira célula, se tiver significa que é hora de para. Uma vez verificada a célula, a linha é trocada de status, se visível então invisível e a imagem muda de IMG_UP/DOWN para IMG_DOWN/UP.

Logo abaixo você vai encontrar os itens necessários para poder criar um relatório com Expand/Collapse.
No próximo post vou fazer uma demonostração de utilização.

------>>>> Código da função

//  These settings you can change to modify the report processing
var UOM="px";    // Set to unit of measure for padding
var INDENT_SIZE=20;  // Set to indent padding step size.  i.e setting to 20 means the padding steps are 20,40,60,80, etc
var UOM_SIZE = UOM.length;
var IMG_PATH = "../images/";
var IMG_NAME = "PropertyGroup_";
var IMG_UP_SUFIX = "plus";
var IMG_DOWN_SUFIX = "minus";
var IMG_EXTENSION = ".gif";
function stripTrailing(string,num) {
  if ( string == "") {return parseInt(0);} else {return parseInt(string.substring(0,string.length-num));}
}
function ExpandCollapse( el ) {
 // Grab the ROW that was clicked and the TABLE that contains it
 var tr;
 var tbl;

 // Set the variables depending on browser (Firefox or others)
 if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
  tr = el.parentNode.parentNode;
  tbl = tr.parentNode.parentNode;
 }
 else{
  tr = el.parentElement.parentElement;
  tbl = tr.parentElement.parentElement;
 }
 // Set the alternating display values for hiding/showing the row
 var sDisplay = ( el.src.indexOf( IMG_DOWN_SUFIX ) == -1 ) ? "" : "none";
 var sDisplayReverse = ( el.src.indexOf( IMG_DOWN_SUFIX ) == -1 ) ? "none" : "";
 //Switch the icon for the clicked row
 el.src = IMG_PATH + IMG_NAME + ( el.src.indexOf( IMG_DOWN_SUFIX ) == -1 ? IMG_DOWN_SUFIX  : IMG_UP_SUFIX ) + IMG_EXTENSION;
 // Starting with the row below the clicked row, start checking each row
 for ( var i = tr.rowIndex + 1; i < tbl.rows.length; i++ )
 {
  // Set the Current row indicator nad the left padding value
  var trCurrent = tbl.rows[i];
  var trCurrentLeft = trCurrent.cells[0].style.paddingLeft;
  // if the current row contains an IMG in it, it's a clickable level and we either have to stop processing,
  //     or reset the icons to a + as it's being collapsed
  if ( trCurrent.cells[0].firstChild && trCurrent.cells[0].getElementsByTagName("IMG").length )
  {

   // If the current row is at the same level or above in the tree, then stop processing,
   //    else reset all the signs below it, essentially collapsing all branches underneath the one that is beig collapsed.
   if (  stripTrailing(trCurrentLeft , UOM_SIZE) <= stripTrailing(tr.cells[0].style.paddingLeft , UOM_SIZE) )
   { break; }
   else
   {
    if (el.src.indexOf( IMG_DOWN_SUFIX ) == -1 )
    {
     trCurrent.cells[0].getElementsByTagName("IMG").item(0).src = IMG_PATH + IMG_NAME + IMG_UP_SUFIX + IMG_EXTENSION;
    }
   }
  }
  // Now, we determine if the row should be hidden or shown.
  if ( eval(stripTrailing(tr.cells[0].style.paddingLeft, UOM_SIZE) + INDENT_SIZE) < stripTrailing(trCurrentLeft, UOM_SIZE) && el.src.indexOf( IMG_DOWN_SUFIX ) >0 )
  {
   trCurrent.style.display = sDisplayReverse;
  } else
  {
   trCurrent.style.display = sDisplay;
  }
 }
}
function StartHidden(el){
 //var tbl=el.parentElement.parentElement.parentElement.parentElement;
 var tbl = document.getElementById(el).getElementsByTagName('table')[0];
 for (var i = 0; i < tbl.rows.length; i++)
 {
  var trCurrent = tbl.rows[i];
  if (trCurrent.cells[0].style.paddingLeft.indexOf(UOM) > -1){
   trCurrent.style.display = "none";
  }
  else{
   trCurrent.style.display = "block";
  }
 }
}
function StartHiddenSome(el, noHide){
 var nh = noHide.split(';');
 var nhn = new Array();
 for(var i = 0; i < nh.length; i++){
  nhn[i] = nh[i].split(',');
 }
 StartHidden(el);
 if(nhn.length > 0){
  var tbl = document.getElementById(el).getElementsByTagName('table')[0];
  for(var k = 0; k < nhn[0].length; k++){
   var stop = false;
   for (var i = 0; i < tbl.rows.length; i++){
    var trCurrent = tbl.rows[i];
    if(stripTrailing(trCurrent.cells[0].style.paddingLeft, UOM_SIZE) == INDENT_SIZE*k  || (trCurrent.cells[0].style.paddingLeft.indexOf(UOM) == -1 && k ==0)){
     for(var j = 0; j < trCurrent.cells[0].children.length; j++){
      if(trCurrent.cells[0].children[j] != null && trCurrent.cells[0].children[j] != undefined){
       for(var kk = 0; kk < nhn.length; kk++){    
        if(trCurrent.cells[0].children[j].innerHTML == nhn[kk][k] && nhn[kk][k] != ''){
         stop = true;
         var IMG = trCurrent.cells[0].firstChild;
         if(IMG.src != null && IMG.src != undefined)
          IMG.src = IMG_PATH + IMG_NAME + (IMG.src.indexOf( IMG_DOWN_SUFIX ) == -1 ? IMG_DOWN_SUFIX  : IMG_UP_SUFIX ) + IMG_EXTENSION
         break;
        }else{
         stop = false;
        }
       }
       if(stop) break;
      }
     }
    }
    if (stripTrailing(trCurrent.cells[0].style.paddingLeft, UOM_SIZE) == INDENT_SIZE*(k+1) && stop){
     trCurrent.style.display = "block";
    }
   }
  }
 }
}