jsTree: Componente Treeview para jQuery

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

También te puede interesar

5 Comments

  1. Edgar
    mar 29, 2009 @ 06:25:30

    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?

    Reply

    • admin
      mar 30, 2009 @ 20:54:57

      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.

      Reply

  2. edissonv
    may 11, 2009 @ 09:40:37

    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.

    Reply

  3. carlos
    oct 12, 2009 @ 08:38:48

    Esta muy interesante el material lo voy a probar y muchas gracias por el aporte.

    Reply

  4. christian
    abr 30, 2010 @ 11:53:22

    hola buen trabajo, yo actualmente programo en asp.net
    y necesita un treeview para ir navengando en una estructura de arbol
    tu treeview me parecio interesante,
    usando json.txt para generar el arbol.
    mi unico inconveniente es que no puedo hacer un link
    en un nodo hoja.
    como puedo agregar un link para que que carge a otra pagina.

    {
    attributes: { id : “node_45″ , rel : “file” },
    data: “reporte 1″
    },

    Reply

Leave a Reply