jsTree: Crea estructures d'arbre interactives amb jQuery

Què és l'API jsTree?

jsTree transforma dades JSON complexes en estructures d'arbre interactives i jeràrquiques, oferint als desenvolupadors una manera potent de visualitzar i navegar per objectes JSON niats. Com a plugin de jQuery, converteix JSON en arbres de nodes expandibles/col·lapsables — ideals per inspeccionar respostes d'API, fitxers de configuració o qualsevol conjunt de dades jeràrquiques.

Funcionalitats clau per a la visualització de JSON:

• Conversió de JSON a arbre: Renderitza automàticament arrays/objectes JSON com a nodes pare-fill
• Exploració interactiva: Expandeix/col·lapsa nodes per aprofundir en estructures JSON complexes
• Càrrega dinàmica: Càrrega lenta (lazy loading) per a grans conjunts de dades JSON
• Renderitzat personalitzat: Estilitza nodes segons tipus de dades JSON (arrays, objectes, valors)
• Cerca i filtrat: Troba ràpidament claus/valors en arbres JSON complexos

A diferència dels visualitzadors plans de JSON, jsTree preserva la jerarquia i relacions de les teves dades, ideal per depurar APIs o documentar esquemes JSON niats.

Estadístiques de GitHub

Nom:
Llenguatge:
Estrelles:
Forquilles:
Llicència:
El repositori es va actualitzar per última vegada a

Per què triar jsTree?

• Solució consolidada: Més de 10 anys de desenvolupament actiu
• Lleuger: Només requereix jQuery com a dependència
• Accessible: Complert amb WCAG 2.0
• Documentació extensa: Referència completa de l'API
• Llicència MIT: Lliure per a ús comercial

Instal·lació

jsTree es pot instal·lar via gestors de paquets o incloure directament des de CDN.

npm install jstree

Nota: No oblidis incloure jQuery abans de jsTree.

Exemples de codi

Explora les capacitats de jsTree amb aquests exemples:

Exemple 1: Arbre bàsic des d'HTML

La manera més senzilla de crear un jsTree és convertir llistes HTML niades. Aquest enfocament és ideal quan l'estructura de l'arbre és estàtica o quan s'està prototipant. El plugin converteix automàticament l'estructura UL/LI niada en un arbre interactiu amb funcionalitat d'expandir/col·lapsar. La implementació bàsica requereix JavaScript mínim i funciona bé per a menús de navegació simples o estructures de contingut.

Funcionalitats demostrades:

• Conversió d'HTML a arbre
• Expandir/col·lapsar
• Estil bàsic

Exemple 2: Carregar dades via JSON

Per a aplicacions dinàmiques, jsTree pot carregar dades des de JSON. Aquest enfocament és més flexible i permet construir l'estructura de l'arbre programàticament. El format JSON és senzill, amb cada node tenint propietats com "id", "text", "children" i "state". També es poden especificar icones, estats desactivats i altres atributs per a cada node. Aquest mètode és especialment útil quan les dades de l'arbre provenen d'una base de dades o API.

Exemple 3: Caselles de selecció i Arrossegar i Soltar

jsTree ofereix plugins que amplien la seva funcionalitat bàsica. El plugin de caselles de selecció afegeix caselles seleccionables a cada node, mentre que el plugin dnd habilita operacions d'arrossegar i soltar. Aquestes funcionalitats són essencials per construir interfícies com gestors d'arxius o sistemes de permisos on els usuaris necessiten seleccionar múltiples elements o reorganitzar la jerarquia. Els plugins mantenen el rendiment de l'arbre fins i tot amb centenars de nodes.

Funcionalitats avançades

jsTree suporta fluxos de treball professionals:

• Càrrega lenta: Carrega nodes sota demanda:

  Càrrega lenta

  
      $('#tree').jstree({
        'core': {
          'data': {
            'url': '/nodes/',
            'data': function (node) {
              return { 'id': node.id };
            }
          }
        }
      });
      
  

• Gestió d'esdeveniments: Respon a interaccions amb l'arbre:

  Listeners d'esdeveniments

  
      $('#tree').on('changed.jstree', function (e, data) {
        console.log('Nodes seleccionats:', data.selected);
      });
      
  

• Temes personalitzats: Estilitza el teu arbre:

  Tema personalitzat

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

Conclusió

jsTree ofereix una solució robusta per a la visualització de dades jeràrquiques. Ideal per:

• Navegadors d'arxius: Navega per estructures de directoris
• Menús de navegació: Crea menús multi-nivell
• Interfícies CMS: Gestiona jerarquies de contingut
• Eines de configuració: Edita configuracions niades

Amb el seu extens sistema de plugins i manteniment actiu, jsTree segueix sent la solució preferida per a estructures d'arbre en aplicacions web.

Productes Similars