jsTree: Twórz interaktywne struktury drzewiaste z jQuery

Czym jest API jsTree?

jsTree przekształca złożone dane JSON w interaktywne, hierarchiczne struktury drzewiaste, oferując programistom potężny sposób wizualizacji i nawigacji po zagnieżdżonych obiektach JSON. Zbudowany jako wtyczka jQuery, konwertuje surowy JSON na rozwijalne/zwijalne węzły - idealne do inspekcji odpowiedzi API, plików konfiguracyjnych lub dowolnych hierarchicznych zbiorów danych.

Kluczowe funkcje wizualizacji JSON:

• Konwersja JSON-na-drzewo: Automatycznie renderuje tablice/obiekty JSON jako węzły rodzic/dziecko
• Eksploracja interaktywna: Rozwiń/zwiń węzły, aby zagłębić się w złożone struktury JSON
• Ładowanie dynamiczne: Leniwe ładowanie dużych zbiorów danych JSON dla optymalnej wydajności
• Niestandardowy render węzłów: Stylizuj węzły na podstawie typów danych JSON (tablice, obiekty, wartości)
• Wyszukiwanie & filtrowanie: Szybko znajdź klucze/wartości w złożonych drzewach JSON

W przeciwieństwie do płaskich przeglądarek JSON, jsTree zachowuje hierarchię i relacje w danych, co czyni go idealnym do debugowania API lub dokumentowania zagnieżdżonych schematów JSON.

Statystyki GitHuba

Nazwa:
Język:
Gwiazdy:
Widły:
Licencja:
Repozytorium zostało ostatnio zaktualizowane o godzinie

Dlaczego wybrać jsTree?

• Sprawdzone rozwiązanie: Ponad 10 lat aktywnego rozwoju
• Lekkie: Wymaga tylko jQuery jako zależności
• Dostępność: Zgodne z WCAG 2.0
• Rozbudowana dokumentacja: Pełna referencja API
• Licencja MIT: Darmowe do użytku komercyjnego

Instalacja

jsTree można zainstalować przez menedżery pakietów lub dołączyć bezpośrednio z CDN.

npm install jstree

Uwaga: Nie zapomnij dołączyć jQuery przed jsTree.

Przykłady kodu

Poznaj możliwości jsTree dzięki tym przykładom:

Przykład 1: Podstawowe drzewo z HTML

Najprostszym sposobem utworzenia jsTree jest konwersja zagnieżdżonych list HTML. To podejście jest idealne, gdy struktura drzewa jest statyczna lub podczas prototypowania. Wtyczka automatycznie konwertuje zagnieżdżoną strukturę UL/LI na interaktywne drzewo z funkcją rozwijania/zwijania. Podstawowa implementacja wymaga minimalnego JavaScriptu i dobrze sprawdza się w prostych menu nawigacyjnych lub strukturach treści.

Prezentowane funkcje:

• Konwersja HTML-na-drzewo
• Funkcjonalność rozwijania/zwijania
• Podstawowy motyw

Przykład 2: Ładowanie danych przez JSON

Dla aplikacji dynamicznych jsTree może ładować dane z JSON. To podejście jest bardziej elastyczne i pozwala programowo budować strukturę drzewa. Format JSON jest intuicyjny, gdzie każdy węzeł ma właściwości takie jak "id", "text", "children" i "state". Możesz także określić ikony, wyłączone stany i inne atrybuty dla każdego węzła. Ta metoda jest szczególnie przydatna, gdy dane drzewa pochodzą z bazy danych lub API.

Przykład 3: Pola wyboru i przeciąganie

jsTree dostarcza wtyczek rozszerzających jego podstawową funkcjonalność. Wtyczka pól wyboru dodaje wybieralne pola do każdego węzła, podczas gdy wtyczka dnd umożliwia operacje przeciągania i upuszczania. Te funkcje są niezbędne do budowania interfejsów takich jak menedżery plików czy systemy uprawnień, gdzie użytkownicy muszą wybierać wiele elementów lub reorganizować hierarchię. Wtyczki utrzymują wydajność drzewa nawet przy setkach węzłów.

Zaawansowane funkcje

jsTree obsługuje profesjonalne przepływy pracy:

• Leniwe ładowanie: Ładuj węzły na żądanie:

  Leniwe ładowanie

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

• Obsługa zdarzeń: Reaguj na interakcje z drzewem:

  Nasłuchiwacze zdarzeń

  
      $('#tree').on('changed.jstree', function (e, data) {
        console.log('Wybrane węzły:', data.selected);
      });
      
  

• Niestandardowe motywy: Stylizuj swoje drzewo:

  Niestandardowy motyw

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

Podsumowanie

jsTree zapewnia solidne rozwiązanie do wizualizacji danych hierarchicznych. Idealne dla:

• Przeglądarek plików: Nawiguj po strukturach katalogów
• Menu nawigacyjnych: Twórz wielopoziomowe menu
• Interfejsów CMS: Zarządzaj hierarchiami treści
• Narzędzi konfiguracyjnych: Edytuj zagnieżdżone ustawienia

Dzięki rozbudowanemu systemowi wtyczek i aktywnemu utrzymaniu, jsTree pozostaje najlepszym rozwiązaniem dla struktur drzewiastych w aplikacjach webowych.

Podobne Produkty