JsTree: Crear Vista de Arbol o TreeView con Javascript

JsTree es un plugin de Javascript que sirve para crear Vistas de Arbol, estructuras con nodos o treeviews.

El plugin lo pueden descargar del sitio web jstree.com y ahi mismo encontraran la documentacion y algunos ejemplos.

En este articulo les explicare lo basico para empezar a usar el plugin y al final les dejo un archivo de descarga con los archivos y ejemplos.

Instalacion del plugin JsTree

Despues de descargar el plugin, los archivos se encuentran en la carpeta “dist” y esa carpeta la extraemos en nuestra carpeta de trabajo y la renombraremos comp “jstree”, tambien necesitaremos el archivo jquery.min.js que lp podemos conseguir en jquery.com.

Todo esto lo debemos agregar en la etiqueta head.

Incluimos Jquery

<script type=”text/javascript” src=”jquery.min.js”></script>

Incluimos el archivo javascript del plugin jstree

<script src=”jstree/jstree.min.js”></script>

Incluimos el archivo css del tema del plugin jstree

<link rel=”stylesheet” href=”jstree/themes/default/style.min.css” />

Uso del plugin JsTree

Ya que agregamos los archivos del plugin, en nuestro documento ahora nos dirigimos a la etiqueta body, donde crearemos un contenedor y dentro de ese contenedor una lista <ul></ul> con varios elementos <li></li>.

Por ejemplo:

<div id=”myjstree”>
<ul>
<li>Nodo 1</li>
<li>Nodo 2</li>
<li>Nodo 3</li>
<li>Nodo 4</li>
</ul>
</div>

Y con eso ya tenemos un treeview con 4 nodos principales, para crear subnodos, simplemente agregamos una lista dentro de un elemento de lista, creando listas anidadas.

<div id=”myjstree”>
<ul>
<li>Nodo 1
<ul>
<li>Nodo 1.1</li>
<li>Nodo 1.2</li>
</ul>
</li>
<li>Nodo 2</li>
</ul>
</div>

Como podemos ver el id del contenedor de la lista sera el id que usaremos posteriormente para crear el arbol en javascript, creamos una etiqueta script y agregamos el siguiente codigo.

[code language=”javascript”]

$(function () {
$(‘#myjstree’).jstree({ "themes" : { "stripes" : true }});
});

[/code]

Con eso ya podremos visualizar el treeview o arbol.

Algo muy util en el plugin es la funcion “click” para el caso que queramos hacer alguna accion en caso de dar click a algun nodo.

[code language=”javascript”]

$(‘#myjstree’).on("select_node.jstree", function (e, data) {
alert("node_id: " + data.node.id);
});

[/code]

Con el codigo de arriba, al hacer click en un nodo se lanza una alerta mostrando el ID del nodo generado por el plugin, sin embargo, es posible poner un id directo al elemento <li></li> de la lista y este sera el ID del nodo.

Ya queda en cuestion de el uso que le vallan a dar.

Personalizar icono del nodo o elemento.

Podemos colocar un icono personalizado a cada elemento de la lista o arbol, simplemente en el elemento hacemos lo siguiente:

<li data-jstree='{ “icon”:”glyphicon glyphicon-folder-open” }’>Nodo 2.1</li>

Asi podemos colocar iconos de glyphicon o de fontawesome o cualquier coleccion “font icon”.

Resultado

Descarga

[sociallocker]

Link de descarga: http://microify.com/11227357/jstree-1

[/sociallocker]

Les invito a apoyar mi blog enviando una donacion desde $1 USD, Gracias.