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

jsTree: Byg interaktive træstrukturer med jQuery

Opret, administrer og visualiser hierarkiske data med dette kraftfulde træ-plugin.

Hvad er jsTree API?

jsTree omdanner komplekse JSON-data til interaktive, hierarkiske træstrukturer og giver udviklere en kraftfuld måde at visualisere og navigere i indlejrede JSON-objekter. Bygget som et jQuery-plugin konverterer det rå JSON til sammenklappelige/udfoldelige nodetræer - perfekt til inspektion af API-svar, konfigurationsfiler eller enhver hierarkisk datasæt.

Nøglefunktioner til JSON-visualisering:

  • JSON-til-træ-konvertering: Gengiver automatisk JSON-arrays/objekter som forælder/barn-noder
  • Interaktiv udforskning: Fold noder ud/sammen for at dykke ned i dybe JSON-strukturer
  • Dynamisk indlæsning: Lazy-load store JSON-datasæt for at optimere ydeevnen
  • Tilpasset noderendering: Stil noder baseret på JSON-datatyper (arrays, objekter, værdier)
  • Søg & Filtrer: Find hurtigt nøgler/værdier i komplekse JSON-træer

I modsætning til flade JSON-viewere bevarer jsTree hierarkiet og relationerne i dine data, hvilket gør det ideelt til fejlsøgning af API'er eller dokumentation af indlejrede JSON-skemaer.

GitHub

GitHub-statistik

Navn:
Sprog:
Stjerner:
Forgafler:
Licens:
Repository blev sidst opdateret kl

Hvorfor vælge jsTree?

  • Pålidelig løsning: 10+ års aktiv udvikling
  • Letvægt: Kræver kun jQuery som afhængighed
  • Tilgængelig: Overholder WCAG 2.0
  • Omfattende dokumentation: Komplet API-reference
  • MIT-licenseret: Gratis til kommerciel brug

Installation

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

NPM-installation


npm install jstree

Bemærk: Husk at inkludere jQuery før jsTree.

Kodeeksempler

Udforsk jsTree's muligheder med disse eksempler:

jsTree

Eksempel 1: Grundlæggende træ fra HTML

Den enkleste måde at oprette et jsTree på er ved at konvertere indlejrede HTML-lister. Denne tilgang er ideel, når din træstruktur er statisk eller når du prototyper. Pluginet konverterer automatisk den indlejrede UL/LI-struktur til et interaktivt træ med udfold/sammenfold-funktionalitet. Den grundlæggende implementering kræver minimal JavaScript og fungerer godt til simple navigationsmenuer eller indholdsstrukturer.

Demonstrerede funktioner:

  • HTML-til-træ-konvertering
  • Udfold/sammenfold-funktionalitet
  • Grundlæggende tema

Eksempel 2: Indlæsning af data via JSON

Til dynamiske applikationer kan jsTree indlæse data fra JSON. Denne tilgang er mere fleksibel og giver dig mulighed for at bygge træstrukturen programmatisk. JSON-formatet er ligetil, hvor hver node har egenskaber som "id", "text", "children" og "state". Du kan også specificere ikoner, deaktiverede tilstande og andre attributter for hver node. Denne metode er særlig nyttig, når dine trædata kommer fra en database eller API.

Eksempel 3: Afkrydsningsfelter og Træk-og-slip

jsTree leverer plugins, der udvider dens kernefunktionalitet. Afkrydsningsplugin'et tilføjer valgbare afkrydsningsfelter til hver node, mens dnd-plugin'et muliggør træk-og-slip-operationer. Disse funktioner er afgørende for at bygge interfaces som filhåndteringer eller tilladelsessystemer, hvor brugere skal vælge flere elementer eller omorganisere hierarkiet. Plugin'erne opretholder træets ydeevne selv med hundredvis af noder.

Avancerede funktioner

jsTree understøtter professionelle arbejdsgange:

  • Lazy loading: Indlæs noder efter behov:

    Lazy loading

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Håndtering af begivenheder: Reager på træinteraktioner:

    Begivenhedshåndterere

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Valgte noder:', data.selected);
    });
  • Tilpassede temaer: Tilpas dit træs udseende:

    Tilpasset tema

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

Konklusion

jsTree leverer en robust løsning til visualisering af hierarkiske data. Ideel til:

  • Filhåndteringer: Naviger i mappestrukturer
  • Navigationsmenuer: Opret flerniveau menuer
  • CMS-interfaces: Håndter indholdshierarkier
  • Konfigurationsværktøjer: Rediger indlejrede indstillinger

Med sit omfattende pluginsystem og aktive vedligehold forbliver jsTree den foretrukne løsning til træstrukturer i webapplikationer.

Lignende Produkter

 Dansk