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";
}
}
}
}
}
