1. Produkter
  2.   Seer
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Bygg interaktive trestrukturer med jQuery

Lag, administrer og visualiser hierarkiske data med denne kraftfulle trepluginen.

Hva er jsTree API?

jsTree transformerer komplekse JSON-data til interaktive, hierarkiske trestrukturer, og tilbyr utviklere en kraftfull måte å visualisere og navigere nestede JSON-objekter på. Bygget som en jQuery-plugin konverterer den rå JSON til utfoldbare/sammenleggbare noder – perfekt for inspeksjon av API-svar, konfigurasjonsfiler eller enhver hierarkisk datasett.

Nøkkelfunksjoner for JSON-visualisering:

  • JSON-til-tre konvertering: Gjengir automatisk JSON-arrayer/objekter som forelder/barn-noder
  • Interaktiv utforskning: Utfold/sammenlegg noder for å dykke ned i dype JSON-strukturer
  • Dynamisk lasting: Lazy-load store JSON-datasett for optimal ytelse
  • Tilpasset noderendering: Stil noder basert på JSON-datatyper (arrayer, objekter, verdier)
  • Søk & filtrering: Finn raskt nøkler/verdier i komplekse JSON-trær

I motsetning til flate JSON-visere, beholder jsTree hierarkiet og relasjonene i dine data, noe som gjør den ideell for API-feilsøking eller dokumentasjon av nestede JSON-skjemaer.

GitHub

GitHub-statistikk

Navn:
Språk:
Stjerner:
Gafler:
Tillatelse:
Repository ble sist oppdatert kl

Hvorfor velge jsTree?

  • Bevist løsning: 10+ år med aktiv utvikling
  • Lettvekt: Krever kun jQuery som avhengighet
  • Tilgjengelighet: Overholder WCAG 2.0
  • Omfattende dokumentasjon: Full API-referanse
  • MIT-lisens: Gratis for kommersiell bruk

Installasjon

jsTree kan installeres via pakkehåndterere eller inkluderes direkte fra CDN.

NPM-installasjon


npm install jstree

Merk: Husk å inkludere jQuery før jsTree.

Kodeeksempler

Utforsk jsTree sine muligheter med disse eksemplene:

jsTree

Eksempel 1: Grunnleggende tre fra HTML

Den enkleste måten å opprette et jsTree på er ved å konvertere nestede HTML-lister. Denne tilnærmingen er ideell når trestrukturen din er statisk eller når du prototyper. Pluginen konverterer automatisk den nestede UL/LI-strukturen til et interaktivt tre med utvid/sammenlegg-funksjonalitet. Grunnleggende implementering krever minimal JavaScript og fungerer bra for enkle navigasjonsmenyer eller innholdsstrukturer.

Viste funksjoner:

  • HTML-til-tre konvertering
  • Utvid/sammenlegg funksjonalitet
  • Grunnleggende tema

Eksempel 2: Laste data via JSON

For dynamiske applikasjoner kan jsTree laste data fra JSON. Denne tilnærmingen er mer fleksibel og lar deg bygge trestrukturen programmatisk. JSON-formatet er grei, hvor hver node har egenskaper som "id", "text", "children", og "state". Du kan også spesifisere ikoner, deaktiverte tilstander og andre attributter for hver node. Denne metoden er spesielt nyttig når tredataene dine kommer fra en database eller API.

Eksempel 3: Avkrysningsbokser og dra-og-slipp

jsTree tilbyr plugins som utvider kjernefunksjonaliteten. Avkrysningsboksen-plugin legger til valgbare avkrysningsbokser på hver node, mens dnd-plugin muliggjør dra-og-slipp-operasjoner. Disse funksjonene er essensielle for å bygge grensesnitt som filbehandlere eller tillatelsessystemer hvor brukere må velge flere elementer eller omorganisere hierarkiet. Pluginsene opprettholder treets ytelse selv med hundrevis av noder.

Avanserte funksjoner

jsTree støtter profesjonelle arbeidsflyter:

  • Lazy loading: Last noder på forespørsel:

    Lazy loading

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Håndtering av hendelser: Reager på treinteraksjoner:

    Hendelseslyttere

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Valgte noder:', data.selected);
    });
  • Tilpassede temaer: Style treet ditt:

    Tilpasset tema

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

Konklusjon

jsTree tilbyr en robust løsning for hierarkisk datavisualisering. Ideell for:

  • Filutforskere: Naviger mappestrukturer
  • Navigasjonsmenyer: Lag flernivåmenyer
  • CMS-grensesnitt: Håndter innholdshierarkier
  • Konfigurasjonsverktøy: Rediger nestede innstillinger

Med sitt omfattende pluginsystem og aktive vedlikehold forblir jsTree den foretrukne løsningen for trestrukturer i webapplikasjoner.

Lignende Produkter

 Norsk