BorrowBits
Si Albert Einstein todavía viviera, leería BorrowBits
Portada » Blog » Computación » Programación » Truco: Actualizar la altura del contenedor de un árbol JSTree

Truco: Actualizar la altura del contenedor de un árbol JSTree

Ya hemos hablado del plugin JSTree en otras ocasiones. Ahora abordarmos un problema muy particular, por lo que no debes seguir leyendo este apunte si no es tu caso (a menos que estés mortalmente aburrido/a):

Cuando vamos insertando nodos en nuestro árbol jsTree, este va creciendo a lo alto, de forma que nos puede interesar que el contenedor, caja, capa o div que lo contiene vaya redimensionando o refrescando su altura en la misma proporción…

¿Cómo conseguir esto sin recargar el árbol?

Si nuestro árbol se carga originalmente con los nodos cerrados y los vamos expandiendo, dado que son operaciones de jQuery de las que nuestro documento original no se entera, el HTML div que lo contiene no actualizará su tamaño, por lo que el árbol quedará parcialmente oculto sesgándose por la parte inferior.

Así pues, será preciso actualizar el height cada vez que realicemos una operación de expandir o contraer nodo (y por extensión en cualquier evento que dé lugar a una expansión dinámica del árbol).

Vamos allá:

Utilizando los eventos ‘after_open’ y ‘after_close’

El plugin jsTree incluye muchísimos eventos. En este caso nos interesan los siguientes:

  • after_open: realiza una función después (y sólo después) de desplegar o expandir una rama del árbol.
  • after_close: realiza una función después (y sólo después) de plegar o contraer una rama del árbol.

Estos eventos los controlamos asociándole al árbol “miarbol” la función de jQuery .bind(), que sirve para asociar manejadores de eventos a cualquier elemento HTML. Después utilizamos la función .css() que como su nombre indica nos permite cambiar propiedades del estilo del documento. Aunque también podría haberse utilizado .height(), un método más directo para el caso que nos ocupa.

Y finalmente el código:


$("#miarbol").bind("after_open.jstree", function (event, data) {
      $("#divContenedor").css("height","auto");
 });

$("#miarbol").bind("after_close.jstree", function (event, data) {
      $("#divContenedor").css("height","auto");
});

Por supuesto existen formas alternativas de hacerlo, pero esta que os propongo es la más sencilla que se me ocurre. Para quien le pueda servir.

Ángel Hita Albarracín

Tecnófilo irreparable y aficionado a las letras. Por lo primero me hice Ingeniero de Teleco y, en cuanto a lo segundo, leo por encima de mis posibilidades. De vez en cuando escribo aquí sobre telecomunicaciones, RF, electrónica, software y ciencia en general.

Escribir un comentario

Deja un comentario

Ángel Hita Albarracín

Tecnófilo irreparable y aficionado a las letras. Por lo primero me hice Ingeniero de Teleco y, en cuanto a lo segundo, leo por encima de mis posibilidades. De vez en cuando escribo aquí sobre telecomunicaciones, RF, electrónica, software y ciencia en general.

Suscríbete

¡Sácale el máximo partido a BBits!

Apúntate para seguir este Blog y recibir por email las nuevas publicaciones y material exclusivo para suscriptores:

Recíbelo gratis al suscribirte

Categorías

Bits del pasado

Sitio patrocinado por:

JitKey rentabilización apartamentos turísticos

JITKey.- Startup enfocada en la gestión de alojamientos turísticos.

Categorías