jsTree: Luo interaktiivisia puurakenteita jQueryllä

Mikä on jsTree API?

jsTree muuntaa monimutkaisen JSON-datan interaktiivisiksi, hierarkkisiksi puurakenteiksi, tarjoten kehittäjille tehokkaan tavan visualisoida ja navigoida sisäkkäisiä JSON-objekteja. jQuery-laajennuksena se muuntaa raakadatan JSON:sta laajennettaviksi/suljettaviksi solmuiksi – täydellinen API-vastausten, asetustiedostojen tai minkä tahansa hierarkkisen tietokokonaisuuden tarkasteluun.

Keskeiset ominaisuudet JSON-visualisoinnissa:

• JSON-puu-muunnos: Renderöi automaattisesti JSON-taulukot/objektit vanhempi/lapsi-solmuina
• Interaktiivinen tutkiminen: Laajenna/sulje solmuja tutkiaksesi syviä JSON-rakenteita
• Dynaaminen lataus: Lataa suuria JSON-tietokokonaisuuksia tarpeen mukaan (lazy loading)
• Mukautettu solmujen renderöinti: Muotoile solmuja JSON-tietotyyppien (taulukot, objektit, arvot) mukaan
• Haku & suodatus: Etsi nopeasti avaimia/arvoja monimutkaisista puista

Toisin kuin litteät JSON-näyttäjät, jsTree säilyttää datan hierarkian ja suhteet, tehden siitä ihanteellisen API-virheenkorjaukseen tai sisäkkäisten JSON-kaavioiden dokumentointiin.

GitHub-tilastot

Nimi:
Kieli:
Tähdet:
Haarukat:
Lisenssi:
Arkisto päivitettiin viimeksi klo

Miksi valita jsTree?

• Luotettava ratkaisu: 10+ vuoden aktiivinen kehitys
• Kevyt: Vaatii vain jQueryn riippuvuudeksi
• Saavutettava: WCAG 2.0 -yhteensopiva
• Laaja dokumentaatio: Täydellinen API-viite
• MIT-lisenssi: Ilmainen kaupalliseen käyttöön

Asennus

jsTree voidaan asentaa paketinhallintojen kautta tai sisällyttää suoraan CDN:stä.

npm install jstree

Huomio: Muista sisällyttää jQuery ennen jsTreeä.

Koodiesimerkkejä

Tutustu jsTree:n ominaisuuksiin näillä esimerkeillä:

Esimerkki 1: Peruspuu HTML:stä

Yksinkertaisin tapa luoda jsTree on muuntaa sisäkkäiset HTML-listat. Tämä lähestymistapa on ihanteellinen, kun puurakenne on staattinen tai prototyyppiä tehdessä. Laajennus muuntaa automaattisesti sisäkkäisen UL/LI-rakenteen interaktiiviseksi puuksi laajenna/sulje-toiminnoilla. Perustoteutus vaatii vain vähän JavaScriptiä ja toimii hyvin yksinkertaisissa navigointivalikoimissa tai sisältörakenteissa.

Esitetyt ominaisuudet:

• HTML-puu-muunnos
• Laajenna/sulje-toiminnot
• Perustyylittely

Esimerkki 2: Tietojen lataaminen JSONista

Dynaamisissa sovelluksissa jsTree voi ladata dataa JSONista. Tämä lähestymistapa on joustavampi ja mahdollistaa puurakenteen ohjelmallisen rakentamisen. JSON-muoto on suoraviivainen, jossa jokaisella solmulla on ominaisuuksia kuten "id", "text", "children" ja "state". Voit myös määrittää kuvakkeita, pois käytössä -tiloja ja muita attribuutteja kullekin solmulle. Tämä menetelmä on erityisen hyödyllinen, kun puun data tulee tietokannasta tai APIsta.

Esimerkki 3: Valintaruudut ja Vedä ja Pudota

jsTree tarjoaa laajennuksia, jotka laajentavat sen perustoiminnallisuutta. Valintaruutulaajennus lisää valittavia valintaruutuja jokaiseen solmuun, kun taas dnd-laajennus mahdollistaa vedä ja pudota -toiminnot. Nämä ominaisuudet ovat välttämättömiä käyttöliittymien, kuten tiedostonhallintajärjestelmien tai käyttöoikeusjärjestelmien, rakentamiseen, joissa käyttäjien on valittava useita kohteita tai uudelleenjärjestettävä hierarkia. Laajennukset ylläpitävät puun suorituskykyä jopa satojen solmujen kanssa.

Edistyneet ominaisuudet

jsTree tukee ammattimaisia työnkulkuja:

• Lazy loading: Lataa solmuja tarpeen mukaan:

  Lazy loading

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

• Tapahtumankäsittely: Reagoi puun interaktioihin:

  Tapahtumankuuntelijat

  
      $('#tree').on('changed.jstree', function (e, data) {
        console.log('Valitut solmut:', data.selected);
      });
      
  

• Mukautetut teemat: Muotoile puusi:

  Mukautettu teema

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

Johtopäätös

jsTree tarjoaa robustin ratkaisun hierarkkisen datan visualisointiin. Ihanteellinen:

• Tiedostoselaimet: Selaa hakemistorakenteita
• Navigointivalikot: Luo monitasoisia valikoita
• CMS-käyttöliittymät: Hallinnoi sisältöhierarkioita
• Asetustyökalut: Muokkaa sisäkkäisiä asetuksia

Laajan laajennusjärjestelmänsä ja aktiivisen ylläpidon ansiosta jsTree säilyy suosittuna ratkaisuna puurakenteisiin verkkosovelluksissa.

Samankaltaisia Tuotteita