jsTree es una librería Javascript para crear listas Treeview fácilmente desde diversos tipos de fuentes de datos(HTML, JSON, XML).
Características
- Permite diversas fuentes de datos para crear el Treeview(HTML, JSON, XML)
- Soporta Drag & drop
- Personalizarían fácil con CSS
- Navegación por teclado
- Soporte múltiple para copiar, mover
- Soporte de callbacks(onchange, oncreate, ondelete, …)
Para ete ejemplo utilizaremos el formato JSON que sera llamado externamente por el Treeview.
Primero nos descargamos el componente Treeview de aquí y lo descomprimimos, en esa carpeta encontraras documentación, varios ejemplos y la carpeta source y _lib la cual contendrán los archivos que necesitamos, podemos llevarlo a otra carpeta o trabajar ahí creando un archivo demo_json.html por ejemplo.
Dentro del html creado incluiremos las librerías necesarias de esta manera.
<head> <script src="source/_lib/_all.js"></script> <script src="source/tree_component.js"></script> <link type="text/css" href="source/tree_component.css" /> <link type="text/css" href="source/style.css" />
luego de esto crearemos un div dentro de body identificandolo con un id
<div class="demo" id="demo"></div>
Ahora nos tocara crear un archivo de texto donde contenga la data para el Treeview en formato JSON, crearemos un archivo llamado json.txt. Para este ejemplo este sera el contenido del archivo.
{
attributes: { id : "node_1" , rel : "drive" },
data: "C:",
icons: "images/hd.png",
state: "open",
children: [
{
attributes: { id : "node_2" , rel : "folder" },
data: "Documents and settings",
children: [
{
attributes: { id : "node_6" , rel : "adm" },
data: "Administrator",
icons: "images/locked.png"
},
{
attributes: { id : "node_3" , rel : "folder" },
data: "All Users"
},
{
attributes: { id : "node_7" , rel : "folder" },
data: "George"
}
]
},
{
attributes: { id : "node_5" , rel : "adm" },
data: "Program files",
icons: "images/locked.png"
},
{
attributes: { id : "node_4", rel : "adm" },
data: "Windows",
icons: "images/locked.png"
}
]
}
Ya tenemos el div contenedor del Treeview y los datos en formato JSON, lo único que nos queda es colocar un script el cual hara la conversión de estos datos a un Treeview dentro del div.
$(function() {
tree1 = new tree_component();
tree1.init($("#demo"), {
data : {
type : "json",
url : "json.txt"
}
});
});
Listo. Un Treeview muy fácil de usar.
Recursos
Tags
Soy
Marzo 29th, 2009 at 6:25 am
Hola!… esta super chevere tu treeview, aunque muy largo, pero vale la pena estudiarlo, lo q no encuentro es como hacer para poder al dar clic a las opciones finales del treeview (ultimos hijos del arbol) pueda cargarse algo en un div a la derecha de la pagina web donde pondria ese treeview… Por fa resolverias mi duda?
Marzo 30th, 2009 at 8:54 pm
Hola Edgar, es muy facil, tienes que manejar “callbacks” que son llamadas al realizar una accion como onrgtclick, ondbclick, onchange, etc.
El proceso a seguir es el siguiente:
En el ejemplo que puse hay una parametro tipo array “data”.
Pondremos la opcion “callback” despues de “data”:
data{…},
callback : {
onchange : function(NODE,TREE_OBJ) { alert(”llamada jsTree”) }
}
Con esto al hacer click en cualquier nodo se ejecutaria el “callback” onchange.
Mayo 11th, 2009 at 9:40 am
Hola, ya hice el laboratorio y me funciona perfectamente el treeview, está execelente para integrarlo a aplicaciones. Pero tengo una duda, y por mas que he tratado no he podido hacer que funcione: “Si yo quiero que nada nodo del treeview tenga un hipervínculo aun sitio web x, como lo haría?”. Podrías resolverme esta duda?
Muchas gracias.
Octubre 12th, 2009 at 8:38 am
Esta muy interesante el material lo voy a probar y muchas gracias por el aporte.