Vista de Árbol o TreeView de JS

Una manera fácil de representar datos jerárquicos y diseñarlos como desee.

Un control TreeView responsive y elegante

Repleto de configuraciones de apariencia y un amplio conjunto de eventos enriquecidos; esta biblioteca es todo lo que necesita para crear el árbol perfecto en JavaScript.

Nodos de Árbol

Cada árbol puede poseer niveles ilimitados de nodos de árbol y cada nodo, puede contener, a su vez, una cantidad innumerable de nodos secundarios. Se puede personalizar tanto el tamaño como la imagen de cada nodo. Los nodos pueden mostrar textos emergentes y aceptar la funcionalidad de arrastrar y soltar. Los datos para los nodos de árbol se pueden establecer a través de plantillas u objetos de datos.

Muestra en línea: una Aplicación de Gestión de Proyectos
Descripción general de la API: TreeNode

Interacción

Los usuarios pueden realizar una variedad de acciones en la vista de árbol y usted puede especificar cuáles de ellas están o no permitidas. Los nodos de árbol incluyen la funcionalidad de arrastrar y soltar y además se pueden seleccionar varios nodos de forma simultánea. Los elementos pueden ser cargados a pedido para aumentar el rendimiento general.

Muestra en línea: Árbol interactivo
Tutorial: TreeView Dinámico con un menú contextual

Apariencia

El tamaño del árbol puede ser modificado y la orientación del mismo puede ser horizontal o vertical. Un conjunto de características incluidas le permite especificar la ubicación exacta del árbol en la página.

Muestra en línea: Árbol con Iconos

Temas y Estilos

El Árbol aplica el estilo CSS a través de los temas que se comparten en todos los controles de la interfaz del usuario de MindFusion. Puede editar los temas predefinidos o crear los suyos propios. También hay una característica especial de cssClass, que le permite asignar una clase CSS personalizada al TreeView, cuya configuración de estilo tiene prioridad sobre el tema.

Muestra en línea: TreeView en Earth Theme

Procedimiento

El control TreeView incluye un gran número de instrucciones útiles. Estas le permiten acceder a elementos mediante programación, cargar los datos del árbol desde objetos o cadenas Json, además puede seleccionar y deseleccionar elementos.

Muestra en línea: Muestra de JavaScript de World Observatories
Referencia de API: TreeView y TreeNode

Eventos

El control TreeView genera una serie de eventos para mantenerlo al tanto sobre cualquier acción que el usuario esté realizando o haya realizado en el árbol y sus elementos. Estos incluyen arrastrar y soltar elementos, movimiento del ratón, selección de elementos, así como hacer clic en los nodos. También tiene la posibilidad de cancelar algunas de las acciones.

Muestra en línea: Dom Inspector con TreeView
Documentación en línea: la Clase TreeView