SandBoxes

SandBoxes by jorbat is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 3.0 Unported License.
Basado en la librería jQuery.

SandBoxes, es un proyecto en desarrollo, donde aplicó lo que voy aprendiendo sobre la libreria jQuery. Todo gira alrededor del comportamiento de una tabla y su contenido.

En SandBoxes V1, se incluyen los siguientes comportamientos:

La tabla de referencia  para el proyecto es la siguiente:

SandBoxes V1

Cabe destacar que aunque este es la tabla de referencia, el código es altamente adaptable para casi cualquier tabla.

Convenciones:
Aunque el código esta planteado lo mas genérico que pude, aún sigo ciertas convenciones de nombres para los elementos de la tabla:
1. Todos los checkbox de la columna “Disable Row” empiezan con el caracter “d” así: name="dCheckbox

2. Todos los checkbox de la columna “Select all Row” empiezan con el caracter “i” así: name="iCheckbox

3.Todos los checkbox que no pertenecen a los dos columnas anteriores preservan su nombre por defecto así:
name="Checkbox

4. El link “Add Row” presenta el id “addlink”
id="addlink"

5. El link “Add Column” presenta el id “addlink2″
id="addlink2"

Deshabilitar/Habilitar una fila:

//----DISABLE ROW----//
function disableROW() {
$('[name^=dC]').click(function(){
//Get the ROW position
var trIndex = $(this).parent().parent().parent().children().index($(this).parent().parent());
//Get the checkBOX status
var stsx = $(this).attr('checked');
//Set the checkBOX stat to the row
$("tr:eq("+trIndex+") [name^=C]:checkbox  ").each(function(){ $(this).attr('disabled',stsx) });
$("tr:eq("+trIndex+") [name^=iC]:checkbox  ").each(function(){ $(this).attr('disabled',stsx) });
});
}

Esta función obtiene el indice (con respecto a la tabla) de la fila de diparo el evento, obtiene el estado del icheckbox true/false y se lo asigna al atributo disabled del resto de los checkbox de la fila cuyo atributo name comienzan por el nombre “C” y “iC”.

Deseleccionar/Seleccionar todos los checkbox de una fila:

//----SELECT ROW----//
function selectROW() {
$('[name^=iC]').click(function(){
//Get the ROW position
var trIndex = $(this).parent().parent().parent().children().index($(this).parent().parent());
//Get the checkBOX status
var sts = $(this).attr('checked');
//Set the checkBOX stat to the row
$("tr:eq("+trIndex+") [name^=C]:checkbox ").each(function(){ $(this).attr('checked',sts) });
});
}

Al igual que la función anterior, se obtiene el indice de la fila que dispara el evento pero esta vez sobre el evento click del checkbox que comienza con los caracteres “iC”, y se asigna el estado del checkbox seleccionado al resto de los checkbox de la fila cuyo atributo name comienzan por el nombre “C”.

Borrar Fila:

//----REMOVE LINK----//
function removeROW(){
$('table a').click(function(){
	$(this).parent().parent().parent().fadeOut('normal');
	return false;
});
}

Esta es bastante corta gracias a la magia de jQuery, solo subimos dos niveles en el arbol y le decimos que desaparesca la fila (fadeOut).

¿Porque subimos tres niveles?
recordemos que la estructura de la tabla va asi:
table -> tbody-> tr -> td -> span -> a.
Entonces si queremos borrar la fila completa al hacer clic en el link (a), subimos un nivel y quedamos en span, subimos otro nivel y ya estamos en td, subimos otro nivel mas y quedamos en tr, que es lo que queremos desaparecer de la tabla, asi que en este pundo le indicamos el fadeOut

Agregar fila:

//----ADD ROW----//
function addROW(){
$("#addlink").click(function(){
var newROW;
var i;
newRow= '<tr><td class="style1">';
newRow += '<span lang="es-pa"><strong>N</strong></span></td><td class="style1">';
newRow += '<input name="dCheckbox14" type="checkbox" /></td><td class="style1">';
newRow += '<input name="iCheckbox12" type="checkbox" /></td><td class="style1">';
newRow += '<span lang="es-pa"><a href="">remove</a></span></td>';
//Contar la cantidad de columnas que tiene elementos que empiezan con el nombre "Ch"
var c = $('tbody tr:last [name^=Ch]').size();
//Concadenar la cantidad de chckbox requeridos
for (i=1; i <= c; i++)
{newRow += '<td><input name="Checkbox" type="checkbox" /></td>';} 
newRow += '</tr>';
$("tbody").append(newRow);
//Cuando se agrega una nueva fila re-encadenar los eventos para incluir las nuevas filas
disableROW();selectROW();removeROW();
return false;
});
}

Acá lo interesante esta en el dinamismo de la tabla, como hay otra función que inserta nuevas columnas, no se cuantos checkbox debe agregar hasta que no realice un conteo sobre los existentes, así que dentro de esta porción de código cuento la cantidad de checkbox cuyo name comienza por “Ch” e itero la misma cantidad y lo voy concadenando a la variable newROW. AL final le indico que realice un append sobre tbody (donde todos los hijos son tr, practicamente le digo que tiene un nuevo hijo).

Agregar Columna:

//----ADD COLUMN----//
function addCOLUMN(){
$("#addlink2").click(function(){
var newHEADER='<span lang="es-pa"><strong>N</strong></span>';
var newCOLUMN= '<input name="Checkbox" type="checkbox" />';
//agregamos la columna de checkbox al final
$("tbody tr").append(newCOLUMN);
//reemplazamos el encabezado
$("tbody tr:first td:last").empty().append(newHEADER);
return false;
});
}

Agregar una columna es menos complicado, ya que por la forma de la tabla sabemos que si agrego una columna todos los checkbox serán de nombre “Checkbox” (asumiendo que siempre agrego columnas a la derecha), el único problema es el encabezado, no queremos checkbox en la primara fila, queremos algún identificador o nombre para la nueva columna. Así que después de agregar la nueva columna (con solo checkbox), reemplazo la primera fila con un identificados en mi caso la letra “N”.

Inicializar los eventos:

//---- Funcion que inicializa los eventos ----//
function init(){disableROW();selectROW();removeROW();addROW();addCOLUMN();}
init();

Aquí solo iniciamos las funciones, cuando el DOM esta listo.

SandBoxes by jorbat is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 3.0 Unported License.
Basado en la librería jQuery.

Entradas Relacionadas:

• No hay Entradas Relacionadas