Icono del sitio Pixelco Tech

ActsAsTreeTable – Tabla+datos jerárquicos con jQuery

jquery-table-treeVarias 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:

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:

Salir de la versión móvil