Crear tablas dinámicas con TreeTable, [Plugin JQuery]

Actualización de estilos: 1/2/2012

Mediante este tutorial aprenderemos a crear tablas dinámicas con el plugin de JQuery, TreeTable

TreeTable es un excelentísimo plugin de JQuery que nos permite dar un formato más dinámico y un aspecto mejorado a nuestras tablas.
Permitiendo colapsar tablas, darg & drop y algunas cuantas características más.

un ejemplo visual del treetable básico

El Javascript es tan sencillo como:

$(document).ready(
	function() {
		$("#tree").treeTable();
	}
);

y la estructura de la tabla debe ser algo parecido a lo siguiente:
 
 
 
 
 
 
 
 
 
 
 

<table id="tree" class="treeTable">
		<thead>
			<tr>
				<th>Proyecto</th>
				<th>Jefe</th>
				<th>Estado</th>
			</tr>
		</thead>
		<tbody>
			<tr id="node-1">
				<td>
					<span class="folder">Security Code box</span>
				</td>
				<td>Nax</td>
				<td>En desarrollo</td>
			</tr>
				<tr id="node-100" class="child-of-node-1">
					<td>
						<span class="rar">Version 1</span>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			<tr id="node-2">
				<td>
					<span class="folder">PseudoToPython</span>
				</td>
				<td>Ninfas</td>
				<td>En desarrollo</td>
			</tr>
				<tr id="node-200" class="child-of-node-2">
					<td>
						<span class="rar">Version 1</span>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				<tr>
				<tr id="node-201" class="child-of-node-2">
					<td>
						<span class="rar">Version 2</span>
					</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
		</tbody>
	</table>
</table>

Descargar: Ejemplo + Archivos Básicos

Hemos creado un ejemplo con una base de datos usando este mismo plugin en este articulo.
Te invitamos a que le heches un vistazo!

Así nos han encontrado!

  • tablas dinamicas jquery
  • tablas dinamicas con jquery
  • jquery tree table
  • tabla dinámica jquery
  • tablas jquery
  • jquery tabla dinamica
  • treetable jquery
  • jquery treetable
  • tablas dinamicas en jquery
  • tablas editables con jquery
  • tree table jquery
  • jquery table tree
  • tablas dinamicas html
  • jquery tablas editables
  • tablas dinamicas jquery php
  • crear tablas dinamicas jquery
  • tablas dinamicas en html
  • treetable ejemplo
  • arbol dinamico jquery
  • jquery lista dinámica

16 Responses to Crear tablas dinámicas con TreeTable, [Plugin JQuery]

  1. Martha dice:

    Como puedo llenarlas con datos de la bd, si el padre es de una tabla y el hijo de otra??

  2. Nax dice:

    hola martha si me pones la estrucutra de tus tablas hago un tutorial de como adaptarlo a los datos de una bd usando tu ejemplo

    ok?

    espero tu respuesta :)

  3. Martha dice:

    Tengo la tabla Proyectos y cada proyecto tiene Actividades. En la tabla Proyectos tengo los campos:idProyecto,nombreProyecto,claveProyecto y en la tabla de Acividad, tengo idActividad,nombreActividad,idProyecto.

    En el nodo padre van los proyectos y en los hijos las actividades de ese proyecto.

    Como le puedo hacer???

  4. Nax dice:

    dame un rato para hacer pruebas y ahora escribo un articulo sobre eso ok? ;)

  5. Jorge dice:

    Hola quisiera saber como puedo llenar la tabla con la base de datos donde solo es una tabla que tiene proyectoid, proyectonombre, proyectoidpadre, proyectonivel y aparte pueda tener una liga para editar el nombre del proyecto o eliminarlo

  6. Jorge dice:

    Hola Nax me sirvió mucho tu ejemplo. Lo que quiciera saber es si se puede hacer recursivo, osea que seria nodo padre nodo hijo nodo hijo del hijo, o crear una función que lo pueda hacer de antemano gracias por tu respuesta.

    • Nax dice:

      si puede hacerse Jorge.

      Pero tienes que tener en cuenta la recursividad y usar funciones recursivas…

      sin pensarlo demasiado se me ocurre tener un id, nombre y padre.
      Donde padre indica si tiene un nodo superior…

      así que tendrías que hacer una función que buscar el primer padre sacara el hijo, y se llamara a sí misma para buscar los hijos del hijo.

      A su vez se llame otra vez para sacar los hijos… si no los hay haces un return y sacas el siguiente hijo del hijo… etc…

      la recursividad es algo complicada de entender pero posible…
      me gustaría hacer una función de muestra pero no creo que tenga tiempo..
      llevo unos meses bastante cargados.

  7. Jorge dice:

    Gracias por tu ayuda veré que es lo que puedo hacer

  8. Jorge dice:

    function muestra($conexion,$padre,$nivel,$fila,$prueba,$orden){
    p
    $query = mysql_query(“SELECT proy_id, proy_nombre, proy_id_padre, proy_nivel,proy_orden FROM proyecto WHERE proy_id_padre=$padre AND proy_nivel=$nivel ORDER BY proy_orden ASC “);
    while($proyecto = mysql_fetch_array($query)){
    $proyId=$proyecto[0];
    $proyNombre=$proyecto[1];
    $padre=$proyecto[2];
    $nivelAct=$proyecto[3];
    $orden=$proyecto[4];

    if($prueba!=”"){

    $proyNombre

    muestra($conexion,$proyId,$nivelAct+1,$fila,$proyId);

    }else{

    .$proyNombre.

    ;
    muestra($conexion,$proyId,$nivelAct+1,$fila,$proyId);

    }
    }
    }

  9. Jorge dice:

    No me pinta las td y tr

    id=”node-’.$prueba.$proyId.’0″ class=”child-of-node-’.$proyId.

    este es el codigo despues de if($prueba!=””){

    y despues de }else{

    id=”node-.$proyId.

    Todo lleva sus respectivas tr y td pero no me deja pubicarlas espero se entienda y me puedas orientar y disculpa el desastre

  10. Nax dice:

    Hola Jorge.
    Borro los coments que queda feo.

    la próxima busca alguna forma de codificar los < >

    con por ejemplo: & lt; y & gt;

    por otro lado, fijate en este ejemplo con nodos y subnodos:
    http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/

    fijate en la sintaxis para ver si la sigues correctamente (el nombre del id y demás)

  11. Jorge dice:

    Hola Nax!!!
    Cheque mi estructura y ya me quedo bien muchas gracias!!!
    Por otra parte quiciera saber si puede existir la opción o se puede hacer que haya una opcióm (como las flechitas que se usan actualmente)que me muestre el árbol completamente expandido y lo contraiga todo.

    Espero me puedas orientar, saludos!!!

  12. Nax dice:

    Hola otra vez jorge.
    Me alegro te funcione!

    Pues que yo sepa no existe esa opción (aunque quizá me equivoco).

    Así entonces, la solución vuelve a ser fijarte en la extructura

    Los nodos y subnodos utilizan una clase para saber si están expandidos o colapsado (expanded y collapsed respectivamente)

    Así que tendrías que crear un evento .onclick en un botón (por ejemplo) y cuando se aprete quite todos las clases expanded y agregue un collapsed en todas las carpetas.

    Y que haga el efecto contrario para expandir.

    Ya que estamos usando jQuery te vendrá bien el .each(), hasClass(), removeClass() y addClass()

    Puedes mirar en la documentación de jQuery sobre ellas.

    NOTA: fijate si toggleClass() te es útil para utilizar el mismo botón para ambas acciones.

    saludos
    nax

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">