TinyTable v3 con jQuery Context Menu y Dialog UI

Introducción

Hace ya algún tiempo que en la Web de anieto2k encontré un interesante artículo sobre TinyTable v3.

TinyTable v3 es un script Javascript que agrega ordenación, búsqueda, promedios de columna y totales, paginación... en tablas HTML. Todo esto lo hace con tan sólo 7Kb!!

Partiendo de esta base y después de usar TinyTable en diferentes proyectos he visto la necesidad de extender sus funcionalidades, concretamente el uso de jQuery Context Menu y jQuery Dialog UI.

Librerías usadas

Listado de librerías usadas para este desarrollo:

• JQuery 1.4.2
• TinyTable v3
• jQuery Context Menu
• jQuery Dialog UI

Motor del sistema

Para poder controlar todas las acciones que intervienen en el Script programado he creado un "controller" para canalizarlas y así simplificar el código:

function Controller(action, el)
{
	//COLUMNA de TinyTable con el id principal
	var idColumn = 0;
	//COLUMNA de TinyTable con el nombre más destacado
	var nameColumn = 1;
	var ids = $(el).children('td').eq(idColumn).text();

	switch(action)
	{
		case "eliminarAction":
			alert("Eliminar "+$('#dialogTable #idEliminar').text());
			break;
		case "eliminar":
			$('#dialogTable').dialog('open');
			$('#dialogTable #nomEliminar').text($(el).children('td').eq(nameColumn).text());
			$('#dialogTable #idEliminar').text(ids);
			break;
		case "editar":
			alert("Eliminar fila: "+ids);
			break;
	}
}

Como queremos que el menú secundario aparezca en cada fila de la tabla, creamos un método para poder inicializar las propiedades de las fila "TR" al finalizar la carga de la página y al realizar una reordenación de la tabla.

function initFuncionsTaula()
{
//Iniciamos el menú secundario personalizado para las filas de la tabla
	$('#tableData tbody tr').contextMenu({
			menu: 'contextMenuElements',
			inSpeed: 10,
			outSpeed: 10
		},
		function(action, el, pos) {
			Controller(action, el)
		}
	);
//Permitimos que se pueda editar la fila con doble click de ratón.
	$('#tableData tbody tr').dblclick(
		function() {
			Controller('editar', this)
		}
	);
}

Modificaciones a Tiny Table v3

Tiny Table al ordenar y al hacer un reset en las filas, reescribe el contenido de ellas una vez ordenadas internamente, esto hace que las inicializaciones de initFunctionsTaula() no tengan efecto. Es por eso que he hecho unas pequeñas modificaciones a Tiny Table para que inicialice nuestros métodos cada vez que se cambia la estructura:

Fichero tinytable/script-new.js

[...]
TINY.table=function(){
	function sorter(n,t,p,r){this.n=n; this.id=t; this.p=p; if(r == undefined ) r = function(){}; this.r = r; if(this.p.init){this.init()}}
[...]

Ahora Tiny Table v3 tiene un cuarto parámetro que es una función que se llamará en sorter.prototype.reset y sorter.prototype.sort, como this.r().

Inicialización de Tiny Table y jQuery Dialog UI

Para finalizar nuestro código Javascrit para que todo funcione nos falta iniciar Tiny Table con el método initFunctionsTaula() y jQuery Dialog UI usando $(document).ready() de Jquery:

var sorter = null;
$(document).ready( function() {
	//INICIAR TINYTABLE
	sorter = new TINY.table.sorter('sorter','tableData',{
		headclass:'head',
		ascclass:'asc',
		descclass:'desc',
		evenclass:'evenrow',
		oddclass:'oddrow',
		evenselclass:'evenselected',
		oddselclass:'oddselected',
		paginate:true,
		size:10,
		colddid:'columns',
		currentid:'currentpage',
		totalid:'totalpages',
		startingrecid:'startrecord',
		endingrecid:'endrecord',
		totalrecid:'totalrecords',
		hoverid:'selectedrow',
		pageddid:'pagedropdown',
		navid:'tablenav',
		sortcolumn:1,
		sortdir:1,
		sum:[8],
		avg:[6,7,8,9],
		columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],
		init:true
		},
		function() {initFuncionsTaula()}
	);
	//INICIALIZAR EL MÓDULO DE DIALOGO
	$("#dialogTable").dialog({
		bgiframe: true,
		resizable: false,
		autoOpen: false,
		modal: true,
		overlay: {
			backgroundColor: '#000',
			opacity: 0.5
		},
		buttons: {
			'Cancelar': function() {
				$(this).dialog('close');
			},
			'Eliminar esta fila': function() {
				Controller('eliminarAction',this);
				$(this).dialog('close');
			}
		}
	});
});

Para el menú secundario ContextMenu será necesario algo como esto:

Editar
Eliminar

Y esto para el contenido del diálogo de eliminar:

 Está intentando eliminar la fila:




¿Está seguro que desea continuar?

Ejemplo y descarga

Aquí os dejo un ejemplo y el código para que lo podáis usar fácilmente.

Puedes ver un ejemplo aquí

Descargar código completo

Acerca de David Figueres Villaró

Vilanova i la Geltrú, Barcelona