1. Products
  2.   Viewer
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Construiți Structuri Arborescente Interactive cu jQuery

Creați, gestionați și vizualizați date ierarhice cu acest puternic plugin arborescent.

Ce este API-ul jsTree?

jsTree transformă date JSON complexe în structuri arborescente ierarhice interactive, oferind dezvoltatorilor o metodă puternică de vizualizare și navigare prin obiecte JSON imbricate. Construit ca plugin jQuery, convertește JSON brut în noduri expandabile/collapsabile - perfect pentru inspectarea răspunsurilor API, fișierelor de configurare sau a oricăror seturi de date ierarhice.

Funcționalități cheie pentru vizualizarea JSON:

  • Conversie JSON-la-Arbore: Randare automată a array-urilor/obiectelor JSON ca noduri părinte/copil
  • Explorare Interactivă: Expandare/colapsare noduri pentru analizarea structurilor JSON complexe
  • Încărcare Dinamică: Încărcare lentă (lazy) a seturilor mari de date JSON pentru performanță optimizată
  • Randare Personalizată a Nodurilor: Stilizare noduri bazată pe tipuri de date JSON (array-uri, obiecte, valori)
  • Căutare & Filtrare: Găsiți rapid chei/valori în arbori JSON complecși

Spre deosebire de vizualizatoarele JSON plate, jsTree păstrează ierarhia și relațiile din datele dvs., făcându-l ideal pentru depanarea API-urilor sau documentarea schemelor JSON imbricate.

GitHub

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

De ce să alegeți jsTree?

  • Soluție dovedită: Peste 10 ani de dezvoltare activă
  • Ușor: Necesită doar jQuery ca dependență
  • Accesibil: Conform cu WCAG 2.0
  • Documentație amplă: Referință API completă
  • Licență MIT: Gratuit pentru utilizare comercială

Instalare

jsTree poate fi instalat prin manageri de pachete sau inclus direct de pe CDN.

Instalare NPM


npm install jstree

Notă: Nu uitați să includeți jQuery înainte de jsTree.

Exemple de Cod

Explorați capabilitățile jsTree cu aceste exemple:

jsTree

Exemplul 1: Arbore de Bază din HTML

Cea mai simplă metodă de a crea un jsTree este prin conversia listelor HTML imbricate. Această abordare este ideală când structura arborescentă este statică sau pentru prototipare. Pluginul convertește automat structura UL/LI imbricată într-un arbore interactiv cu funcționalitate expandare/colapsare. Implementarea de bază necesită JavaScript minim și funcționează excelent pentru meniuri de navigare simple sau structuri de conținut.

Funcționalități demonstrate:

  • Conversie HTML-la-Arbore
  • Funcționalitate expandare/colapsare
  • Temă de bază

Exemplul 2: Încărcare Date prin JSON

Pentru aplicații dinamice, jsTree poate încărca date din JSON. Această abordare este mai flexibilă și vă permite să construiți structura arborescentă programatic. Formatul JSON este intuitiv, fiecare nod având proprietăți precum "id", "text", "children" și "state". Puteți specifica de asemenea icoane, stări dezactivate și alte atribute pentru fiecare nod. Această metodă este utilă în special când datele arborescente provin dintr-o bază de date sau API.

Exemplul 3: Căsuțe de Bifă și Drag & Drop

jsTree oferă plugin-uri care extind funcționalitatea sa de bază. Plugin-ul de căsuțe de bifă adaugă căsuțe selectabile la fiecare nod, iar plugin-ul dnd permite operații de drag & drop. Aceste funcționalități sunt esențiale pentru construirea de interfețe precum manageri de fișiere sau sisteme de permisiuni unde utilizatorii trebuie să selecteze multiple elemente sau să reorganizeze ierarhia. Plugin-urile mențin performanța arborelui chiar și cu sute de noduri.

Funcționalități Avansate

jsTree suportă fluxuri de lucru profesionale:

  • Încărcare lentă: Încărcați noduri la cerere:

    Încărcare Lentă

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Gestionare Evenimente: Reacționați la interacțiuni cu arborele:

    Ascultători Evenimente

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Noduri selectate:', data.selected);
    });
  • Teme Personalizate: Stilizați-vă arborele:

    Temă Personalizată

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

Concluzie

jsTree oferă o soluție robustă pentru vizualizarea datelor ierarhice. Ideal pentru:

  • Browser-e de fișiere: Navigați structuri de directoare
  • Meniuri de navigare: Creați meniuri multi-nivel
  • Interfețe CMS: Gestionați ierarhii de conținut
  • Unelte de configurare: Editați setări imbricate

Cu sistemul său extins de plugin-uri și întreținere activă, jsTree rămâne soluția preferată pentru structuri arborescente în aplicațiile web.

Similar Products

 Romanian