Uno de los plugin jQuery más útiles de los que he descubierto recientemente es JSTree, un componente javascript bastante completo e interesante para interfaces de usuario basadas en web. Sirve para desplegar estructuras de árbol totalmente personalizables, configurables e interactivas. Y por supuesto es gratuito.

En este tutorial veremos cómo instalar y configurar un jsTree sencillo, ya que la documentación oficial deja bastante que desear. Antes de comenzar, algunas de las características que soporta:

• Varias fuentes de datos: HTML, JSON, XML
• Cargas AJAX
• Drag & Drop
• Múltiples temas
• Sistema de eventos jQuery
• Librería para navegación con atajos de teclado
• Configuración multiidioma
• Etc, etc

En este tutorial nos vamos a limitar a configurar y desplegar un JSTree sin muchas florituras. En próximos tutoriales hablaremos de funcionalidades más específicas como drag & drop, añadir menús contextuales, renombrar un nodo, asociar eventos más complicados, etc.

Primer paso: instala la librería

Ve a la página de JSTree y descarga la última versión. Descomprime la carpeta y colócala en el lugar que quieras de tu directorio web.

Hecho esto, incluye estas líneas en la cabecera de tu archivo HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jstree/jquery.jstree.js"></script>

Segundo paso: monta una estructura

Lo bueno de JSTree es que puedes generarlo a partir de HTML, JSON o XML. En este caso vamos a montar una estructura HTML con elementos <li> como la siguiente:

<div id="selector">
  <ul><li id="blog"><a href="#">Blog</a>
    <ul><li id="articulos"><a href="#">Articulos</a>
      <ul>
	<li id="articulo1"><a href="#">Articulo 1</a></li>
	<li id="articulo2"><a href="#">Articulo 2</a></li>
      </ul><li>
     <li id="tutorial"><a href="#">Tutorial</a>
        <ul>
	<li id="articulo3"><a href="#">Tutorial 1</a></li>
	<li id="articulo4"><a href="#">Tutorial 2</a></li>
        </ul>
     </li></ul>
   </li></ul>
</div>

El elemento selector es muy importante, ya que define dónde en qué div se va a cargar el objeto JSTree.

Tercer paso: planta un árbol

Para que el JSTree funcione sólo habría que añadir la siguiente sentencia en un script de la cabecera:

$(document).ready(function() {
   $("#selector").jstree();
});

Así de simple. Aunque ahora mismo es un árbol bastante inútil, al menos permite desplegar y plegar sus nodos de forma jerárquica:

Por último vamos a experimentar con la configuración:

JSTree es un plugin al que se le pueden enchufar multitud de plugins propios. La forma correcta de declararlos es la siguiente:

$("#selector").jstree({
   "plugins" : [ "html_data", "types", "themes", "ui", "dnd" ]
  });

Vamos a usar el plugin themes para modificar el aspecto visual del árbol para que se parezca al árbol de directorios de Mac OS:

$("#selector").jstree({

  "themes" : {
     "theme" : "apple",
     "dots" : true,
     "icons" : true
   },
   "plugins" : [ "html_data", "themes", "ui" ]
  });

También podemos asociar un evento a un nodo, por ejemplo un mensaje alert. Para ello podemos usar la función .bind del plugin ui, que es útil para implementar eventos de interfaz sobre nodos. Basta con añadir al $(document).ready(); estas líneas:

$("#selector").bind("select_node.jstree", function (e, data) {
   alert("Has seleccionado el nodo "+data.rslt.obj.attr("id"));
 });

Donde data.rslt.obj es el elemento de la estructura DOM al que hace referencia el clic sobre el nodo seleccionado.

Haced vuestros experimentos, comentadnos qué tal y no dejéis de plantear vuestras dudas.