jsTree: Interaktív fastruktúrák építése jQuery-vel

Mi a jsTree API?

A jsTree összetett JSON adatokat interaktív, hierarchikus fastruktúrákká alakít, lehetővé téve a fejlesztők számára, hogy hatékonyan jelenítsenek meg és navigáljanak beágyazott JSON objektumok között. jQuery plugin-ként a nyers JSON-t kibontható/összecsukható csomópont-fává konvertálja – ideális API válaszok, konfigurációs fájlok vagy bármilyen hierarchikus adathalmaz ellenőrzéséhez.

Főbb funkciók JSON visualizációhoz:

• JSON-fa konverzió: Automatikusan megjeleníti JSON tömböket/objektumokat szülő/gyermek csomópontokként
• Interaktív felfedezés: Bontsd ki/csukd össze a csomópontokat a mély JSON struktúrák feltárásához
• Dinamikus betöltés: Lusta betöltés (lazy loading) nagy JSON adathalmazokhoz
• Egyéni csomópont megjelenítés: Csomópontok stílusozása JSON adattípusok alapján (tömbök, objektumok, értékek)
• Keresés és szűrés: Gyorsan találd meg a kulcsokat/értékeket összetett fákon belül

A lapos JSON megjelenítőkkel ellentétben a jsTree megőrzi az adatok hierarchiáját és kapcsolatait, ideálissá téve API hibakereséshez vagy beágyazott JSON sémák dokumentálásához.

GitHub statisztika

Név:
Nyelv:
Csillagok:
Villák:
Engedély:
Az adattár legutóbbi frissítése:

Miért válaszd a jsTree-t?

• Bejáratott megoldás: 10+ év aktív fejlesztés
• Könnyű súlyú: Csak jQuery szükséges függőségként
• Akadálymentes: WCAG 2.0 kompatibilis
• Átfogó dokumentáció: Teljes API referencia
• MIT licenc: Ingyenes kereskedelmi használatra

Telepítés

A jsTree telepíthető csomagkezelőkkel vagy közvetlenül CDN-ről is.

npm install jstree

Megjegyzés: Ne felejtsd el a jQuery-t a jsTree előtt include-olni.

Kód példák

Fedezd fel a jsTree lehetőségeit ezekkel a példákkal:

1. példa: Alapfa HTML-ből

A jsTree létrehozásának legegyszerűbb módja a beágyazott HTML listák konvertálása. Ez a megközelítés ideális, ha a fastruktúrád statikus vagy prototípus készítésénél vagy. A plugin automatikusan átalakítja a beágyazott UL/LI struktúrát interaktív fává kibontás/összecsukás funkcióval. Az alap implementáció minimális JavaScriptet igényel és jól működik egyszerű navigációs menükhez vagy tartalomstruktúrákhoz.

Bemutatott funkciók:

• HTML-fa konverzió
• Kibontás/összecsukás funkció
• Alap stílus

2. példa: Adatbetöltés JSON-ból

Dinamikus alkalmazásokhoz a jsTree JSON-ból tölthet be adatokat. Ez a megközelítés rugalmasabb és lehetővé teszi a fastruktúra programozott építését. A JSON formátum egyértelmű, minden csomópont rendelkezik "id", "text", "children" és "state" tulajdonságokkal. Ikonokat, letiltott állapotokat és egyéb attribútumokat is megadhatsz csomópontonként. Ez a módszer különösen hasznos, ha a fád adatai adatbázisból vagy API-ból származnak.

3. példa: Jelölőnégyzetek és Húzd-és-engedd

A jsTree kiegészítőket biztosít alapfunkcióinak bővítésére. A jelölőnégyzet kiegészítő választható jelölőnégyzeteket ad minden csomóponthoz, míg a dnd kiegészítő húzd-és-engedd műveleteket tesz lehetővé. Ezek a funkciók elengedhetetlenek olyan felületekhez, mint fájlkezelők vagy jogosultsági rendszerek, ahol a felhasználóknak több elemet kell kijelölniük vagy a hierarchiát újra kell szervezniük. A kiegészítők száz csomópont mellett is fenntartják a fa teljesítményét.

Haladó funkciók

A jsTree támogatja a professzionális munkafolyamatokat:

• Lusta betöltés: Csomópontok betöltése igény szerint:

  Lusta betöltés

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

• Eseménykezelés: Reakció fa interakciókra:

  Eseményfigyelők

  
      $('#tree').on('changed.jstree', function (e, data) {
        console.log('Kiválasztott csomópontok:', data.selected);
      });
      
  

• Egyéni témák: A fa stílusának testreszabása:

  Egyéni téma

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

Összegzés

A jsTree robusztus megoldást kínál hierarchikus adatok visualizációjához. Ideális:

• Fájlböngészők: Könyvtárstruktúrák navigálása
• Navigációs menük: Többszintű menük létrehozása
• CMS felületek: Tartalomhierarchiák kezelése
• Konfigurációs eszközök: Beágyazott beállítások szerkesztése

Kiterjedt kiegészítő rendszerével és aktív karbantartásával a jsTree marad a preferált megoldás fastruktúrákhoz webalkalmazásokban.

Hasonló Termékek