1. Products
  2.   Viewer
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Kurti interaktyvias medžio struktūras su jQuery

Kurkite, tvarkykite ir vizualizuokite hierarchinius duomenis su šiuo galingu medžio įskiepiu.

Kas yra jsTree API?

jsTree paverčia sudėtingus JSON duomenis į interaktyvias, hierarchines medžio struktūras, suteikdamas kūrėjams galingą būdą vizualizuoti ir naršyti įdėtus JSON objektus. Sukurtas kaip jQuery įskiepis, jis konvertuoja žalią JSON į išplečiamus/suspaudžiamus mazgus – idealus API atsakymų, konfigūracijos failų ar bet kokių hierarchinių duomenų rinkinių tyrimui.

Pagrindinės JSON vizualizacijos funkcijos:

  • JSON-į-medį konvertavimas: Automatiškai atvaizduoja JSON masyvus/objektus kaip tėvinius/vaikinius mazgus
  • Interaktyvus tyrimas: Išskleiskite/suskleiskite mazgus gilinti į sudėtingas JSON struktūras
  • Dinaminis įkėlimas: Lėtai įkelkite didelius JSON duomenų rinkinius, kad optimizuotumėte našumą
  • Adaptuotas mazgų atvaizdavimas: Stiliuokite mazgus pagal JSON duomenų tipus (masyvai, objektai, reikšmės)
  • Paieška & filtravimas: Greitai suraskite raktus/reikšmes sudėtinguose JSON medžiuose

Skirtingai nei plokšti JSON peržiūros įrankiai, jsTree išlaiko jūsų duomenų hierarchiją ir ryšius, todėl yra idealus API derinimui ar įdėtų JSON schemų dokumentavimui.

GitHub

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

Kodėl rinktis jsTree?

  • Išbandytas sprendimas: 10+ metų aktyvios plėtros
  • Lengvas: Reikalauja tik jQuery kaip priklausomybės
  • Prieinamas: Atitinka WCAG 2.0 standartus
  • Išsamioji dokumentacija: Pilnas API žinynas
  • MIT licencija: Nemokamas komerciniam naudojimui

Diegimas

jsTree gali būti įdiegtas per paketų valdymo sistemas arba įtrauktas tiesiogiai iš CDN.

NPM diegimas


npm install jstree

Pastaba: Nepamirškite įtraukti jQuery prieš jsTree.

Kodo pavyzdžiai

Išnagrinėkite jsTree galimybes su šiais pavyzdžiais:

jsTree

1 pavyzdys: Pagrindinis medis iš HTML

Paprasčiausias būdas sukurti jsTree yra konvertuojant įdėtus HTML sąrašus. Šis metodas tinka, kai jūsų medžio struktūra yra statinė arba kai kuriate prototipą. Įskiepis automatiškai paverčia įdėtą UL/LI struktūrą į interaktyvų medį su išskleidimo/suskleidimo funkcionalumu. Pagrindiniam įgyvendinimui reikia minimalaus JavaScript kodo ir puikiai tinka paprastiems navigacijos meniu ar turinio struktūroms.

Demonstruojamos funkcijos:

  • HTML į medžio konvertavimas
  • Išskleidimo/suskleidimo funkcionalumas
  • Pagrindinis temų valdymas

2 pavyzdys: Duomenų įkėlimas naudojant JSON

Dinaminėms aplikacijoms jsTree gali įkelti duomenis iš JSON. Šis metodas yra lankstesnis ir leidžia programiškai kurti medžio struktūrą. JSON formatas yra intuityvus, kiekvienas mazgas turi savybes kaip "id", "text", "children" ir "state". Taip pat galite nurodyti piktogramas, išjungtas būsenas ir kitas kiekvieno mazgo savybes. Šis metodas ypač naudingas, kai jūsų medžio duomenys ateina iš duomenų bazės ar API.

3 pavyzdys: Žymimieji langeliai ir vilkimo-funkcija

jsTree teikia įskiepius, kurie plečia jo pagrindinį funkcionalumą. Žymimųjų langelių įskiepis prideda pasirenkamus žymimuosius langelius prie kiekvieno mazgo, o dnd įskiepis įgalina vilkimo ir numetimo operacijas. Šios funkcijos yra būtinos kurdami sąsajas kaip failų tvarkyklės ar leidimų sistemas, kur vartotojams reikia pasirinkti kelis elementus arba pertvarkyti hierarchiją. Įskiepiai išlaiko medžio našumą net ir su šimtais mazgų.

Išplėstinės funkcijos

jsTree palaiko profesionalius darbo procesus:

  • Vėlyvas įkėlimas: Įkelkite mazgus pagal poreikį:

    Vėlyvas įkėlimas

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Įvykių apdorojimas: Reaguokite į medžio sąveikas:

    Įvykių klausytojai

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Pasirinkti mazgai:', data.selected);
    });
  • Adaptuotos temos: Stiliuokite savo medį:

    Adaptuota tema

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

Išvados

jsTree siūlo patikimą sprendimą hierarchinių duomenų vizualizacijai. Idealus:

  • Failų naršyklėms: Naršykite katalogų struktūras
  • Navigacijos meniu: Kurti daugiapakopius meniu
  • CMS sąsajoms: Tvarkyti turinio hierarchijas
  • Konfigūracijos įrankiams: Redaguoti įdėtus nustatymus

Turėdamas išplėstinę įskiepių sistemą ir aktyvų palaikymą, jsTree išlieka pagrindiniu sprendimu medžio struktūroms žiniatinklio aplikacijose.

Similar Products

 Lithuanian