1. Productos
  2.   Espectador
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Crea Estructuras de Árbol Interactivas con jQuery

Crea, gestiona y visualiza datos jerárquicos con este potente plugin de árboles.

¿Qué es la API jsTree?

jsTree transforma datos JSON complejos en estructuras de árbol interactivas y jerárquicas, ofreciendo a los desarrolladores una forma potente de visualizar y navegar objetos JSON anidados. Como plugin de jQuery, convierte JSON crudo en árboles de nodos expandibles/colapsables, perfectos para inspeccionar respuestas API, archivos de configuración o cualquier conjunto de datos jerárquico.

Características clave para visualización JSON:

  • Conversión JSON a árbol: Renderiza automáticamente arrays/objetos JSON como nodos padre/hijo
  • Exploración interactiva: Expande/colapsa nodos para profundizar en estructuras JSON complejas
  • Carga dinámica: Carga diferida (lazy loading) para grandes conjuntos de datos JSON
  • Renderizado personalizado: Estiliza nodos según tipos de datos JSON (arrays, objetos, valores)
  • Búsqueda y filtrado: Encuentra rápidamente claves/valores en árboles JSON complejos

A diferencia de los visores JSON planos, jsTree preserva la jerarquía y relaciones en tus datos, ideal para depurar APIs o documentar esquemas JSON anidados.

GitHub

Estadísticas de GitHub

Nombre:
Idioma:
Estrellas:
Tenedores:
Licencia:
El repositorio se actualizó por última vez en

¿Por qué elegir jsTree?

  • Solución probada: Más de 10 años de desarrollo activo
  • Ligero: Solo requiere jQuery como dependencia
  • Accesible: Cumple con WCAG 2.0
  • Documentación completa: Referencia API exhaustiva
  • Licencia MIT: Gratis para uso comercial

Instalación

jsTree puede instalarse mediante gestores de paquetes o incluirse directamente desde CDN.

Instalación con NPM


npm install jstree

Nota: No olvides incluir jQuery antes de jsTree.

Ejemplos de Código

Explora las capacidades de jsTree con estos ejemplos:

jsTree

Ejemplo 1: Árbol básico desde HTML

La forma más simple de crear un jsTree es convirtiendo listas HTML anidadas. Este enfoque es ideal cuando tu estructura de árbol es estática o para prototipado. El plugin convierte automáticamente la estructura UL/LI anidada en un árbol interactivo con funcionalidad expandir/colapsar. La implementación básica requiere JavaScript mínimo y funciona bien para menús de navegación simples o estructuras de contenido.

Características demostradas:

  • Conversión HTML a árbol
  • Funcionalidad expandir/colapsar
  • Estilo básico

Ejemplo 2: Cargar datos via JSON

Para aplicaciones dinámicas, jsTree puede cargar datos desde JSON. Este enfoque es más flexible y te permite construir la estructura del árbol programáticamente. El formato JSON es sencillo, con cada nodo teniendo propiedades como "id", "text", "children" y "state". También puedes especificar iconos, estados deshabilitados y otros atributos por nodo. Este método es especialmente útil cuando tus datos de árbol vienen de una base de datos o API.

Ejemplo 3: Casillas de verificación y Arrastrar/Soltar

jsTree proporciona plugins que extienden su funcionalidad básica. El plugin de casillas añade casillas seleccionables a cada nodo, mientras que el plugin dnd permite operaciones de arrastrar y soltar. Estas características son esenciales para construir interfaces como administradores de archivos o sistemas de permisos donde los usuarios necesitan seleccionar múltiples elementos o reorganizar la jerarquía. Los plugins mantienen el rendimiento del árbol incluso con cientos de nodos.

Funciones Avanzadas

jsTree soporta flujos de trabajo profesionales:

  • Carga perezosa: Carga nodos bajo demanda:

    Carga Perezosa

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Manejo de eventos: Responde a interacciones con el árbol:

    Escuchadores de Eventos

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Nodos seleccionados:', data.selected);
    });
  • Temas personalizados: Estiliza tu árbol:

    Tema Personalizado

    
    $('#tree').jstree({
      'themes': {
        'name': 'custom',
        'dots': false,
        'icons': false
      }
    });

Conclusión

jsTree proporciona una solución robusta para visualizar datos jerárquicos. Ideal para:

  • Exploradores de archivos: Navegar estructuras de directorios
  • Menús de navegación: Crear menús multinivel
  • Interfaces CMS: Gestionar jerarquías de contenido
  • Herramientas de configuración: Editar ajustes anidados

Con su extenso sistema de plugins y mantenimiento activo, jsTree sigue siendo la solución preferida para estructuras de árbol en aplicaciones web.

Productos Similares

 Español