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

jsTree: Veidojiet interaktīvas koka struktūras ar jQuery

Izveidojiet, pārvaldiet un vizualizējiet hierarhiskus datus ar šo jaudīgo koka spraudni.

Kas ir jsTree API?

jsTree pārveido sarežģītus JSON datus par interaktīvām, hierarhiskām koka struktūrām, piedāvājot izstrādātājiem jaudīgu veidu, kā vizualizēt un pārlūkot ligzdotos JSON objektus. Kā jQuery spraudnis tas pārveido neapstrādātus JSON datus par izvēršamiem/savelkamiem mezgliem – ideāli API atbilžu, konfigurāciju failu vai jebkuru hierarhisku datu kopu analīzei.

Galvenās JSON vizualizācijas funkcijas:

  • JSON uz koku konvertēšana: Automātiski attēlo JSON masīvus/objektus kā vecāka/bērna mezglus
  • Interaktīva izpēte: Izvērsiet/savelciet mezglus, lai iedziļinātos dziļās JSON struktūrās
  • Dinamiskā ielāde: Lēnā ielāde lielām JSON datu kopām, lai optimizētu veiktspēju
  • Pielāgots mezglu attēlojums: Formatējiet mezglus atbilstoši JSON datu tipiem (masīvi, objekti, vērtības)
  • Meklēšana & filtrēšana: Ātri atrodiet atslēgas/vērtības sarežģītās JSON kokos

Atšķirībā no plakanajiem JSON skatītājiem, jsTree saglabā jūsu datu hierarhiju un attiecības, padarot to ideālu API atkļūdošanai vai ligznotu JSON shēmu dokumentēšanai.

GitHub

GitHub Stats

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

Kāpēc izvēlēties jsTree?

  • Pārbaudīts risinājums: Vairāk nekā 10 gadu aktīva attīstība
  • Viegls: Nepieciešama tikai jQuery kā atkarība
  • Pieejams: Atbilst WCAG 2.0 standartiem
  • Pilnīga dokumentācija: Pilnīgs API uzziņu materiāls
  • MIT licence: Bezmaksas komerciālai lietošanai

Instalēšana

jsTree var instalēt, izmantojot pakotņu pārvaldniekus, vai iekļaut tieši no CDN.

NPM instalēšana


npm install jstree

Piezīme: Neaizmirstiet iekļaut jQuery pirms jsTree.

Koda piemēri

Izpētiet jsTree iespējas ar šiem piemēriem:

jsTree

1. piemērs: Pamata koks no HTML

Vienkāršākais veids, kā izveidot jsTree, ir pārveidot ligzdotos HTML sarakstus. Šī pieeja ir ideāla, ja jūsu koka struktūra ir statiska vai veidojat prototipu. Spraudnis automātiski pārveido ligzdoto UL/LI struktūru par interaktīvu koku ar izvēršanas/savelkšanas funkcionalitāti. Pamata ieviešanai nepieciešams minimāls JavaScript kods, un tas labi darbojas vienkāršām navigācijas izvēlnēm vai satura struktūrām.

Demonstrētās funkcijas:

  • HTML uz koku pārveidošana
  • Izvēršanas/savelkšanas funkcionalitāte
  • Pamata noformējums

2. piemērs: Datu ielāde caur JSON

Dinamiskām lietotnēm jsTree var ielādēt datus no JSON. Šī pieeja ir elastīgāka un ļauj programmatiski veidot koka struktūru. JSON formāts ir intuitīvs, katram mezglam ir tādas īpašības kā "id", "text", "children" un "state". Varat arī norādīt ikonas, atspējotus statusus un citus atribūtus katram mezglam. Šī metode ir īpaši noderīga, ja jūsu koka dati nāk no datu bāzes vai API.

3. piemērs: Izvēles rūtiņas un vilkšana/atlaišana

jsTree nodrošina spraudņus, kas paplašina tā pamatfunkcionalitāti. Izvēles rūtiņu spraudnis pievieno izvēles rūtiņas katram mezglam, bet dnd spraudnis ļauj veikt vilkšanas un atlaišanas darbības. Šīs funkcijas ir būtiskas, veidojot saskarnes, piemēram, failu pārvaldniekus vai atļauju sistēmas, kur lietotājiem jāatlasa vairāki elementi vai jāpārkārto hierarhija. Spraudņi saglabā koka veiktspēju pat ar simtiem mezglu.

Paplašinātās funkcijas

jsTree atbalsta profesionālus darba procesus:

  • Lēnā ielāde: Ielādējiet mezglus pēc nepieciešamības:

    Lēnā ielāde

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Notikumu apstrāde: Reaģējiet uz koka mijiedarbībām:

    Notikumu klausītāji

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Atlasītie mezgli:', data.selected);
    });
  • Pielāgotas tēmas: Pielāgojiet sava koka izskatu:

    Pielāgota tēma

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

Secinājumi

jsTree nodrošina uzticamu risinājumu hierarhisku datu vizualizācijai. Ideāls:

  • Failu pārlūkiem: Pārlūkojiet direktoriju struktūras
  • Navigācijas izvēlnēm: Izveidojiet daudzlīmeņu izvēlnes
  • CMS saskarnēm: Pārvaldiet satura hierarhijas
  • Konfigurācijas rīkiem: Rediģējiet ligzdotos iestatījumus

Ar savu plašo spraudņu sistēmu un aktīvu uzturēšanu, jsTree paliek galvenais risinājums koku struktūrām tīmekļa lietotnēs.

Similar Products

 Latvian