1. produkty
  2.   Divák
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Vytvářejte interaktivní stromové struktury pomocí jQuery

Vytvářejte, spravujte a vizualizujte hierarchická data s tímto výkonným stromovým pluginem.

Co je jsTree API?

jsTree převádí složitá JSON data na interaktivní, hierarchické stromové struktury a nabízí vývojářům výkonný způsob vizualizace a navigace ve vnořených JSON objektech. Jako jQuery plugin přeměňuje surový JSON na stromy s rozbalovacími/sbalovacími uzly – ideální pro kontrolu API odpovědí, konfiguračních souborů nebo jakýchkoli hierarchických datových sad.

Klíčové funkce pro vizualizaci JSON:

  • Převod JSON na strom: Automaticky vykresluje JSON pole/objekty jako nadřazené/podřazené uzly
  • Interaktivní průzkum: Rozbalte/sbalte uzly pro detailní prozkoumání hlubokých JSON struktur
  • Dynamické načítání: Postupné načítání (lazy loading) velkých JSON datových sad pro optimalizaci výkonu
  • Vlastní vykreslování uzlů: Styly uzlů podle JSON datových typů (pole, objekty, hodnoty)
  • Hledání & Filtrování: Rychlé nalezení klíčů/hodnot ve složitých stromových strukturách

Na rozdíl od plochých prohlížečů JSON, jsTree zachovává hierarchii a vztahy ve vašich datech, což je ideální pro ladění API nebo dokumentaci vnořených JSON schémat.

GitHub

Statistiky GitHubu

Název:
Jazyk:
hvězdy:
Vidlice:
Licence:
Úložiště bylo naposledy aktualizováno v

Proč zvolit jsTree?

  • Osvědčené řešení: Více než 10 let aktivního vývoje
  • Odlehčený: Vyžaduje pouze jQuery jako závislost
  • Přístupný: Splňuje WCAG 2.0
  • Rozsáhlá dokumentace: Kompletní referenční příručka API
  • MIT licence: Volné pro komerční použití

Instalace

jsTree lze nainstalovat pomocí správců balíčků nebo přímo z CDN.

Instalace přes NPM


npm install jstree

Poznámka: Nezapomeňte před jsTree připojit jQuery.

Příklady kódu

Prozkoumejte možnosti jsTree s těmito příklady:

jsTree

Příklad 1: Základní strom z HTML

Nejjednodušší způsob, jak vytvořit jsTree, je převod vnořených HTML seznamů. Tento přístup je ideální, když je vaše stromová struktura statická nebo při prototypování. Plugin automaticky převede vnořenou UL/LI strukturu na interaktivní strom s funkcí rozbalení/sbalení. Základní implementace vyžaduje minimum JavaScriptu a dobře funguje pro jednoduché navigační menu nebo obsahové struktury.

Demonstrované funkce:

  • Převod HTML na strom
  • Funkce rozbalení/sbalení
  • Základní tematizace

Příklad 2: Načítání dat přes JSON

Pro dynamické aplikace může jsTree načítat data z JSON. Tento přístup je flexibilnější a umožňuje programově vytvářet stromovou strukturu. Formát JSON je přímočarý, přičemž každý uzel má vlastnosti jako "id", "text", "children" a "state". Můžete také určit ikony, zakázané stavy a další atributy pro každý uzel. Tato metoda je zvláště užitečná, když vaše stromová data pocházejí z databáze nebo API.

Příklad 3: Zaškrtávací políčka a Přetažení

jsTree poskytuje pluginy, které rozšiřují jeho základní funkčnost. Plugin zaškrtávacích políček přidává k uzlům výběrová políčka, zatímco plugin dnd umožňuje operace přetažení. Tyto funkce jsou nezbytné pro vytváření rozhraní, jako jsou správci souborů nebo systémy oprávnění, kde uživatelé potřebují vybrat více položek nebo reorganizovat hierarchii. Pluginy udržují výkonnost stromu i se stovkami uzlů.

Pokročilé funkce

jsTree podporuje profesionální pracovní postupy:

  • Postupné načítání: Načítání uzlů podle potřeby:

    Postupné načítání

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Zpracování událostí: Reakce na interakce se stromem:

    Posluchače událostí

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Vybrané uzly:', data.selected);
    });
  • Vlastní motivy: Stylování vašeho stromu:

    Vlastní motiv

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

Závěr

jsTree poskytuje robustní řešení pro vizualizaci hierarchických dat. Ideální pro:

  • Prohlížeče souborů: Procházení adresářových struktur
  • Navigační menu: Vytváření víceúrovňových menu
  • Rozhraní CMS: Správa obsahových hierarchií
  • Konfigurační nástroje: Úprava vnořených nastavení

Díky rozsáhlému systému pluginů a aktivní údržbě zůstává jsTree preferovaným řešením pro stromové struktury ve webových aplikacích.

Podobné Produkty

 Czech