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
