ActsAsTreeTable – Tabla+datos jerárquicos con jQuery

Varias veces escribí sobre extensiones para crear y ordenar tablas, y también sobre componentes que permiten crear estructuras de datos jerárquicas. Hoy les voy a presentar otro recurso que combina datos tabulares con jerárquicos.

ActsAsTreeTable es un plugin jQuery que permite crear en una página HTML, tablas con estructuras jerárquicas colapsables.

Implementar ActsAsTreeTable

Primero hay que enlazar las bibliotecas contenidas en los archivos JS:

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.acts_as_tree_table.js"></script>

Aquí se enlazaron: jQuery y ActsAsTreeTable

También hay que enlazar el archivo CSS que contiene los estilos de la tabla:

<link href="css/jquery.acts_as_tree_table.css"
rel="stylesheet" type="text/css" />

El siguiente código Javascript, implementa la tabla y su comportamiento:

<script type="text/javascript">

$(document).ready(function() {
$(".treetable").acts_as_tree_table();
$("#treetable").acts_as_tree_table({
expandable: false
});
});

</script>

En código encontramos:

• “.treetable” es el nombre del ID de la tabla.
• expandable: false, con esta propiedad puesta a falso, se hace que en este caso, no se pueda colapzar los subdados que contiene.

El código HTML necesario es algo similar a:

<table id="treetable">
  <tr id="node-1">
    <td>Padre</td>
  </tr>
  <tr id="node-2">
    <td>Hijo</td>
  </tr>
</table>

ActAsTreeTable:

• Web: blog.cubicphuse.nl/2008/10/02/actsastreetable-a-jquery-plugin