Utilizando cookies para guardar el estado de un árbol JSTree

Utilizando cookies para guardar el estado de un árbol JSTree

jstree ejemplo apple mac osY seguimos lidiando con JSTree, un potente plugin gratuito basado en jQuery que sirve para desplegar estructuras en árbol muy personalizables. Hace unas semanas explicábamos los primeros pasos configurando JSTree, ya que cuenta con una documentación oficial tan escueta que realmente no ayuda mucho.

Nodos que persisten más allá de la sesión

Os indico en pocas líneas cómo implementar persistencia en el árbol. Es decir, cómo almacenar, guardar o recordar el estado de los nodos (abierto, cerrado, cargado, seleccionado…) para que permanezca la próxima vez que accedamos al sitio web y el usuario no tenga que andar desplegando las ramas cada vez que cargue la página.

THE COOKIE MONSTER

La clave es el uso de cookies y para ello lo más importante es descargar el plugin jQuery.cookie desde aquí y cargarlo junto al resto de JavaScript de vuestra página. Este plugin se ocupa de todo lo relacionado con el tratamiento de las cookies, por lo que no tenemos que preocuparnos de programarlas.

A continuación activamos el plugin “cookies” de jsTree  (¡ojo!, no confundir con el jQuery.cookie)  en la configuración del árbol y que permite almacenar en una cookie las variables correspondientes al “state”:

[javascript]
$(‘.miarbol’).jstree({
plugins: ["html_data", "ui", "cookies"]
[/javascript]

Este plugin está implementado en el archivo jquery.jstree.js con un parámetro auto_save a true por defecto, por lo que a priori no hay que tocar nada más. Las cookies que se almacenarán y recuperarán automáticamente son las siguientes:

[javascript]

save_opened : "jstree_open",
save_selected : "jstree_select",
save_loaded : "jstree_load"

[/javascript]

…y que podréis modificar a vuestro antojo retocando la configuración del plugin en el árbol (evitad modificar la librería directamente). Si tenéis dudas sobre este apartado preguntadme en los comentarios.

TROUBLESHOOTING PREVENTIVO

Si no os funciona lo más probable es que no estéis definiendo ninguna “id” correcta para cada nodo, que además de existir no debe contener caracteres extraños como por ejemplo espacios.

Previous Definición de máquina de Turing y ejemplos
Next Qué es y cómo funciona Symfony2: Conceptos claves

About author

Angel
Angel 172 posts

Siempre quise ser inventor y escritor: por lo primero me hice ingeniero, y en cuanto a lo segundo, escribo aquí de vez en cuando sobre telecomunicaciones y tecnología. Me gustan los robots, los perretes y los libros (analógicos).

You might also like

Desarrollo 0 Comentarios

Comparando algoritmos en Java: Recortes de revista

Cambiando un poco de temática, hoy os traigo un artículo práctico sobre cómo realizar la comparativa de varios algoritmos en Java. El tema surgió así, navegando por Internet me topé

Desarrollo 0 Comentarios

Seguridad Web al limite: JS-Injection

Hace unos meses os comentaba en un artículo la importancia de validar los datos en el servidor, puesto que las validaciones en el cliente son fácilmente manipulables. Como también comentamos,

Tutorial 3 Comentarios

Maneja tu base de datos SQL con Python

Una de las principales herramientas en muchas empresas es el paquete Office de Microsoft. Este paquete aparte de incluir herramientas tan conocidas como Word o Excel, tienen un gestor de base

1 Comentario

  1. ginespc
    junio 12, 19:38 Reply

    buenas, ¿sabrias como se podria hacer para que las cookies de jstree solamente durasen por ejemplo 40 minutos?

    Un saludo, muchas gracias

Deja un comentario