1. Prodotti
  2.   Spettatore
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Costruisci Strutture ad Albero Interattive con jQuery

Crea, gestisci e visualizza dati gerarchici con questo potente plugin ad albero.

Cos'è l'API jsTree?

jsTree trasforma dati JSON complessi in strutture ad albero interattive e gerarchiche, offrendo agli sviluppatori un modo potente per visualizzare e navigare oggetti JSON annidati. Come plugin jQuery, converte JSON grezzo in alberi di nodi espandibili/collassabili - perfetti per ispezionare risposte API, file di configurazione o qualsiasi dataset gerarchico.

Funzionalità chiave per la visualizzazione JSON:

  • Conversione da JSON ad Albero: Renderizza automaticamente array/oggetti JSON come nodi padre/figlio
  • Esplorazione Interattiva: Espandi/Collassa nodi per analizzare strutture JSON complesse
  • Caricamento Dinamico: Caricamento lazy (lazy loading) di grandi dataset JSON
  • Rendering Personalizzato: Stilizza nodi in base ai tipi di dati JSON (array, oggetti, valori)
  • Ricerca & Filtri: Trova rapidamente chiavi/valori in alberi JSON complessi

A differenza dei visualizzatori JSON piatti, jsTree preserva la gerarchia e le relazioni nei tuoi dati, rendendolo ideale per il debug di API o la documentazione di schemi JSON annidati.

GitHub

Statistiche GitHub

Nome:
Lingua:
Stelle:
Forchette:
Licenza:
L'ultimo aggiornamento del repository è avvenuto il

Perché Scegliere jsTree?

  • Soluzione Collaudata: 10+ anni di sviluppo attivo
  • Leggero: Richiede solo jQuery come dipendenza
  • Accessibile: Conforme a WCAG 2.0
  • Documentazione Completa: Riferimento API completo
  • Licenza MIT: Gratuito per uso commerciale

Installazione

jsTree può essere installato tramite gestori di pacchetti o incluso direttamente da CDN.

Installazione NPM


npm install jstree

Nota: Non dimenticare di includere jQuery prima di jsTree.

Esempi di Codice

Esplora le capacità di jsTree con questi esempi:

jsTree

Esempio 1: Albero Base da HTML

Il modo più semplice per creare un jsTree è convertire liste HTML annidate. Questo approccio è ideale quando la tua struttura ad albero è statica o durante la prototipazione. Il plugin converte automaticamente la struttura UL/LI annidata in un albero interattivo con funzionalità espandi/collassa. L'implementazione base richiede JavaScript minimo e funziona bene per menu di navigazione semplici o strutture di contenuto.

Funzionalità Dimostrate:

  • Conversione da HTML ad Albero
  • Funzionalità Espandi/Collassa
  • Stile Base

Esempio 2: Caricamento Dati via JSON

Per applicazioni dinamiche, jsTree può caricare dati da JSON. Questo approccio è più flessibile e ti permette di costruire la struttura ad albero programmaticamente. Il formato JSON è semplice, con ogni nodo che ha proprietà come "id", "text", "children" e "state". Puoi anche specificare icone, stati disabilitati e altri attributi per nodo. Questo metodo è particolarmente utile quando i dati del tuo albero provengono da un database o API.

Esempio 3: Checkbox e Trascina & Rilascia

jsTree fornisce plugin che estendono la sua funzionalità base. Il plugin checkbox aggiunge checkbox selezionabili a ogni nodo, mentre il plugin dnd abilita operazioni di trascina e rilascia. Queste funzionalità sono essenziali per costruire interfacce come file manager o sistemi di permessi dove gli utenti devono selezionare più elementi o riorganizzare la gerarchia. I plugin mantengono le prestazioni dell'albero anche con centinaia di nodi.

Funzionalità Avanzate

jsTree supporta flussi di lavoro professionali:

  • Caricamento Lazy: Carica nodi su richiesta:

    Caricamento Lazy

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Gestione Eventi: Reagisci alle interazioni con l'albero:

    Listener di Eventi

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Nodi selezionati:', data.selected);
    });
  • Temi Personalizzati: Personalizza lo stile del tuo albero:

    Tema Personalizzato

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

Conclusione

jsTree fornisce una soluzione robusta per la visualizzazione di dati gerarchici. Ideale per:

  • File browser: Naviga strutture di directory
  • Menu di navigazione: Crea menu multi-livello
  • Interfacce CMS: Gestisci gerarchie di contenuti
  • Strumenti di configurazione: Modifica impostazioni annidate

Con il suo ampio sistema di plugin e manutenzione attiva, jsTree rimane la soluzione preferita per strutture ad albero nelle applicazioni web.

Prodotti Simili

 Italiano