1. Producten
  2.   Kijker
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Bouw Interactieve Boomstructuren met jQuery

Maak, beheer en visualiseer hiërarchische data met deze krachtige boomplugin.

Wat is de jsTree API?

jsTree transformeert complexe JSON-data naar interactieve, hiërarchische boomstructuren en biedt ontwikkelaars een krachtige manier om geneste JSON-objecten te visualiseren en te navigeren. Gebouwd als jQuery-plugin zet het ruwe JSON om in uitklapbare/samenklapbare knooppunten - perfect voor het inspecteren van API-responses, configuratiebestanden of elk hiërarchisch dataset.

Belangrijke functies voor JSON-visualisatie:

  • JSON-naar-Boom Conversie: Render automatisch JSON-arrays/objecten als ouder/kind knooppunten
  • Interactieve Verkenning: Vouw knooppunten uit/klap in om diep in JSON-structuren te duiken
  • Dynamisch Laden: Laad grote JSON-datasets lazy voor optimale prestaties
  • Aangepaste Knoopweergave: Stijl knooppunten op basis van JSON-datatypes (arrays, objecten, waarden)
  • Zoeken & Filteren: Snel sleutels/waarden vinden in complexe JSON-bomen

In tegenstelling tot platte JSON-viewers behoudt jsTree de hiërarchie en relaties in je data, wat het ideaal maakt voor API-debugging of het documenteren van geneste JSON-schema's.

GitHub

GitHub-statistieken

Naam:
Taal:
Sterren:
Vorken:
Licentie:
De opslagplaats is voor het laatst bijgewerkt op

Waarom jsTree kiezen?

  • Bewezen oplossing: 10+ jaar actieve ontwikkeling
  • Lichtgewicht: Vereist alleen jQuery als afhankelijkheid
  • Toegankelijk: Voldoet aan WCAG 2.0
  • Uitgebreide documentatie: Volledige API-referentie
  • MIT-licentie: Gratis voor commercieel gebruik

Installatie

jsTree kan worden geïnstalleerd via pakketbeheerders of direct vanaf CDN worden ingeladen.

NPM Installatie


npm install jstree

Let op: Vergeet niet jQuery in te laden vóór jsTree.

Codevoorbeelden

Ontdek de mogelijkheden van jsTree met deze voorbeelden:

jsTree

Voorbeeld 1: Basisboom vanuit HTML

De eenvoudigste manier om een jsTree te maken is door geneste HTML-lijsten te converteren. Deze aanpak is ideaal wanneer je boomstructuur statisch is of wanneer je prototypet. De plugin zet automatisch de geneste UL/LI-structuur om in een interactieve boom met uitklapfunctionaliteit. De basisimplementatie vereist minimale JavaScript en werkt goed voor simpele navigatiemenu's of inhoudsstructuren.

Gedemonstreerde functies:

  • HTML-naar-boom conversie
  • Uitklapfunctionaliteit
  • Basis thema

Voorbeeld 2: Data Laden via JSON

Voor dynamische applicaties kan jsTree data uit JSON laden. Deze aanpak is flexibeler en laat je de boomstructuur programmatisch opbouwen. Het JSON-formaat is eenvoudig, waarbij elk knooppunt eigenschappen heeft zoals "id", "text", "children", en "state". Je kunt ook iconen, uitgeschakelde statussen en andere attributen per knooppunt specificeren. Deze methode is vooral handig wanneer je boomdata uit een database of API komt.

Voorbeeld 3: Selectievakjes en Slepen-en-Neerlaten

jsTree biedt plugins die de kernfunctionaliteit uitbreiden. De checkbox-plugin voegt selecteerbare vakjes toe aan elk knooppunt, terwijl de dnd-plugin slepen-en-neerlaten mogelijk maakt. Deze functies zijn essentieel voor het bouwen van interfaces zoals bestandsbeheerders of permissiesystemen waar gebruikers meerdere items moeten selecteren of de hiërarchie moeten herorganiseren. De plugins behouden de prestaties van de boom zelfs met honderden knooppunten.

Geavanceerde Functies

jsTree ondersteunt professionele workflows:

  • Lazy loading: Laad knooppunten op aanvraag:

    Lazy Loading

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

    Gebeurtenisluisteraars

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Geselecteerde knooppunten:', data.selected);
    });
  • Aangepaste thema's: Stijl je boom:

    Aangepast Thema

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

Conclusie

jsTree biedt een robuuste oplossing voor hiërarchische datavisualisatie. Ideaal voor:

  • Bestandsbrowsers: Navigeer door directorystructuren
  • Navigatiemenu's: Maak multilevel menu's
  • CMS-interfaces: Beheer inhoudshiërarchieën
  • Configuratietools: Bewerk geneste instellingen

Met zijn uitgebreide pluginsysteem en actief onderhoud blijft jsTree de go-to oplossing voor boomstructuren in webapplicaties.

Vergelijkbare Producten

 Nederlands