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.