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

jsTree: Bygg interaktiva trädstrukturer med jQuery

Skapa, hantera och visualisera hierarkiska data med denna kraftfulla trädplugin.

Vad är jsTree API?

jsTree omvandlar komplex JSON-data till interaktiva, hierarkiska trädstrukturer och erbjuder utvecklare ett kraftfullt sätt att visualisera och navigera kapslade JSON-objekt. Byggd som en jQuery-plugin konverterar den rå JSON till expanderbara/ihopfallbara noder - perfekt för att inspektera API-svar, konfigurationsfiler eller hierarkiska dataset.

Nyckelfunktioner för JSON-visualisering:

  • JSON-till-träd-konvertering: Renderar automatiskt JSON-arrayer/objekt som förälder/barn-noder
  • Interaktiv utforskning: Expandera/kollapsa noder för att analysera djupa JSON-strukturer
  • Dynamisk inläsning: Lazy-load av stora JSON-dataset för optimerad prestanda
  • Anpassad nodrendering: Stilisera noder baserat på JSON-datatyper (arrayer, objekt, värden)
  • Sök & filtrering: Hitta snabbt nycklar/värden i komplexa JSON-träd

Till skillnad från platta JSON-visare bevarar jsTree hierarkin och relationerna i din data, vilket gör den idealisk för API-felsökning eller dokumentation av kapslade JSON-scheman.

GitHub

GitHub-statistik

Namn:
Språk:
Stjärnor:
Gafflar:
Licens:
Repository uppdaterades senast kl

Varför välja jsTree?

  • Beprövad lösning: 10+ års aktiv utveckling
  • Lättvikt: Kräver endast jQuery som beroende
  • Tillgänglighet: Följer WCAG 2.0
  • Omfattande dokumentation: Fullständig API-referens
  • MIT-licens: Gratis för kommersiell användning

Installation

jsTree kan installeras via pakethanterare eller inkluderas direkt från CDN.

NPM-installation


npm install jstree

Observera: Glöm inte att inkludera jQuery före jsTree.

Kodexempel

Utforska jsTrees funktioner med dessa exempel:

jsTree

Exempel 1: Grundläggande träd från HTML

Det enklaste sättet att skapa ett jsTree är genom att konvertera kapslade HTML-listor. Denna metod är idealisk när din trädstruktur är statisk eller vid prototyputveckling. Pluginen konverterar automatiskt den kapslade UL/LI-strukturen till ett interaktivt träd med expandera/kollapsa-funktionalitet. Grundimplementationen kräver minimal JavaScript och fungerar bra för enkla navigeringsmenyer eller innehållsstrukturer.

Demonterade funktioner:

  • HTML-till-träd-konvertering
  • Expandera/kollapsa-funktionalitet
  • Grundläggande tema

Exempel 2: Ladda data via JSON

För dynamiska applikationer kan jsTree ladda data från JSON. Denna metod är mer flexibel och låter dig bygga trädstrukturen programmatiskt. JSON-formatet är intuitivt, där varje nod har egenskaper som "id", "text", "children" och "state". Du kan också specificera ikoner, inaktiverade tillstånd och andra attribut per nod. Denna metod är särskilt användbar när träddata kommer från en databas eller API.

Exempel 3: Kryssrutor och dra-och-släpp

jsTree tillhandahåller plugins som utökar kärnfunktionaliteten. Kryssruta-pluginen lägger till valbara kryssrutor vid varje nod, medan dnd-pluginen möjliggör dra-och-släpp-operationer. Dessa funktioner är väsentliga för att bygga gränssnitt som filhanterare eller behörighetssystem där användare behöver välja flera objekt eller omorganisera hierarkin. Plugins bibehåller trädets prestanda även med hundratals noder.

Avancerade funktioner

jsTree stödjer professionella arbetsflöden:

  • Lazy loading: Ladda noder på begäran:

    Lazy loading

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Händelsehantering: Reagera på trädinteraktioner:

    Händelselyssnare

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Valda noder:', data.selected);
    });
  • Anpassade teman: Anpassa ditt träds utseende:

    Anpassat tema

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

Slutsats

jsTree tillhandahåller en robust lösning för hierarkisk datavisualisering. Idealisk för:

  • Filbläddrare: Navigera katalogstrukturer
  • Navigeringsmenyer: Skapa flernivåmenyer
  • CMS-gränssnitt: Hantera innehållshierarkier
  • Konfigurationsverktyg: Redigera kapslade inställningar

Med sitt omfattande pluginsystem och aktiva underhåll förblir jsTree den främsta lösningen för trädstrukturer i webbapplikationer.

Liknande Produkter

 Swedish