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
Posts Relacionados
Leave a Reply