1. Produk
  2.   Penonton
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Bina Struktur Pokok Interaktif dengan jQuery

Cipta, urus dan visualkan data hierarki dengan plugin pokok berkuasa ini.

Apa itu API jsTree?

jsTree mengubah data JSON kompleks menjadi struktur pokok hierarki yang interaktif, menawarkan cara berkuasa untuk pembangun memvisualkan dan menavigasi objek JSON bersarang. Dibina sebagai plugin jQuery, ia menukar JSON mentah kepada pokok nod yang boleh dikembangkan/ditutup - sesuai untuk memeriksa respons API, fail konfigurasi atau mana-mana set data hierarki.

Ciri utama visualisasi JSON:

  • Penukaran JSON-ke-Pokok: Secara automatik memaparkan tatasusunan/objek JSON sebagai nod induk/anak
  • Eksplorasi Interaktif: Kembangkan/tutup nod untuk menyelami struktur JSON yang mendalam
  • Pemuatan Dinamik: Muatkan set data JSON besar secara malas untuk mengoptimumkan prestasi
  • Pemaparan Nod Tersuai: Gaya nod berdasarkan jenis data JSON (tatasusunan, objek, nilai)
  • Cari & Tapis: Cari kunci/nilai dengan pantas dalam pokok JSON kompleks

Tidak seperti paparan JSON rata, jsTree mengekalkan hierarki dan hubungan dalam data anda, menjadikannya ideal untuk penyahpepijatan API atau pendokumentasian skema JSON bersarang.

GitHub

Statistik GitHub

nama:
Bahasa:
Bintang:
Garpu:
Lesen:
Repositori dikemas kini terakhir pada

Mengapa Pilih jsTree?

  • Penyelesaian terbukti: Pembangunan aktif lebih 10 tahun
  • Ringan: Hanya memerlukan jQuery sebagai kebergantungan
  • Aksesibiliti: Mematuhi WCAG 2.0
  • Dokumentasi lengkap: Rujukan API yang komprehensif
  • Lesen MIT: Percuma untuk kegunaan komersial

Pemasangan

jsTree boleh dipasang melalui pengurus pakej atau disertakan terus dari CDN.

Pemasangan NPM


npm install jstree

Nota: Jangan lupa sertakan jQuery sebelum jsTree.

Contoh Kod

Terokai keupayaan jsTree dengan contoh-contoh ini:

jsTree

Contoh 1: Pokok Asas dari HTML

Cara paling mudah untuk mencipta jsTree adalah dengan menukar senarai HTML bersarang. Pendekatan ini sesuai apabila struktur pokok anda statik atau ketika membuat prototaip. Plugin secara automatik menukar struktur UL/LI bersarang kepada pokok interaktif dengan fungsi kembang/tutup. Pelaksanaan asas hanya memerlukan JavaScript minimum dan berfungsi baik untuk menu navigasi mudah atau struktur kandungan.

Ciri yang ditunjukkan:

  • Penukaran HTML ke pokok
  • Fungsi kembang/tutup
  • Tema asas

Contoh 2: Memuat Data melalui JSON

Untuk aplikasi dinamik, jsTree boleh memuat data dari JSON. Pendekatan ini lebih fleksibel dan membolehkan anda membina struktur pokok secara pengaturcaraan. Format JSON adalah mudah, dengan setiap nod mempunyai sifat seperti "id", "text", "children", dan "state". Anda juga boleh menentukan ikon, keadaan dilumpuhkan dan atribut lain untuk setiap nod. Kaedah ini amat berguna apabila data pokok anda datang dari pangkalan data atau API.

Contoh 3: Kotak Semak dan Seret & Lepas

jsTree menyediakan plugin yang memperluas fungsi terasnya. Plugin kotak semak menambah kotak semak yang boleh dipilih pada setiap nod, manakala plugin dnd membolehkan operasi seret dan lepas. Ciri ini penting untuk membina antara muka seperti pengurus fail atau sistem kebenaran di mana pengguna perlu memilih pelbagai item atau menyusun semula hierarki. Plugin mengekalkan prestasi pokok walaupun dengan beratus-ratus nod.

Ciri Lanjutan

jsTree menyokong aliran kerja profesional:

  • Pemuatan malas: Muat nod mengikut keperluan:

    Pemuatan Malas

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Pengendalian acara: Tindak balas kepada interaksi pokok:

    Pendengar Acara

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Nod terpilih:', data.selected);
    });
  • Tema tersuai: Gaya pokok anda:

    Tema Tersuai

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

Kesimpulan

jsTree menyediakan penyelesaian kukuh untuk visualisasi data hierarki. Sesuai untuk:

  • Pelayar fail: Navigasi struktur direktori
  • Menu navigasi: Cipta menu pelbagai peringkat
  • Antara muka CMS: Urus hierarki kandungan
  • Alat konfigurasi: Edit tetapan bersarang

Dengan sistem plugin yang luas dan penyelenggaraan aktif, jsTree kekal sebagai penyelesaian utama untuk struktur pokok dalam aplikasi web.

Produk Serupa

 Malay