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

jsTree: Bangun Struktur Pohon Interaktif dengan jQuery

Buat, kelola, dan visualisasikan data hierarkis dengan plugin pohon yang powerful ini.

Apa itu API jsTree?

jsTree mengubah data JSON kompleks menjadi struktur pohon interaktif dan hierarkis, memberikan developer cara powerful untuk memvisualisasikan dan menavigasi objek JSON bertingkat. Sebagai plugin jQuery, ia mengkonversi JSON mentah menjadi pohon node yang bisa diperluas/diciutkan - sempurna untuk memeriksa respons API, file konfigurasi, atau dataset hierarkis apa pun.

Fitur utama untuk visualisasi JSON:

  • Konversi JSON ke Pohon: Secara otomatis merender array/objek JSON sebagai node parent/child
  • Eksplorasi Interaktif: Perluas/Ciutkan node untuk menelusuri struktur JSON yang dalam
  • Pemuatan Dinamis: Lazy-load dataset JSON besar untuk optimasi performa
  • Render Node Kustom: Gaya node berdasarkan tipe data JSON (array, objek, nilai)
  • Pencarian & Filter: Cari key/value dengan cepat di pohon JSON kompleks

Tidak seperti viewer JSON datar, jsTree mempertahankan hierarki dan relasi dalam data Anda, menjadikannya ideal untuk debugging API atau mendokumentasikan skema JSON bertingkat.

GitHub

Statistik GitHub

Nama:
Bahasa:
Bintang:
Garpu:
Lisensi:
Repositori terakhir diperbarui pada

Mengapa Memilih jsTree?

  • Solusi Teruji: 10+ tahun pengembangan aktif
  • Ringan: Hanya membutuhkan jQuery sebagai dependensi
  • Aksesibel: Mematuhi WCAG 2.0
  • Dokumentasi Lengkap: Referensi API komprehensif
  • Lisensi MIT: Gratis untuk penggunaan komersial

Instalasi

jsTree dapat diinstal melalui package manager atau disertakan langsung dari CDN.

Instalasi NPM


npm install jstree

Catatan: Jangan lupa sertakan jQuery sebelum jsTree.

Contoh Kode

Jelajahi kemampuan jsTree dengan contoh-contoh ini:

jsTree

Contoh 1: Pohon Dasar dari HTML

Cara paling sederhana membuat jsTree adalah dengan mengkonversi daftar HTML bertingkat. Pendekatan ini ideal ketika struktur pohon Anda statis atau saat membuat prototipe. Plugin secara otomatis mengkonversi struktur UL/LI bertingkat menjadi pohon interaktif dengan fungsi expand/collapse. Implementasi dasar membutuhkan JavaScript minimal dan bekerja baik untuk menu navigasi sederhana atau struktur konten.

Fitur yang Ditunjukkan:

  • Konversi HTML ke Pohon
  • Fungsi Expand/Collapse
  • Styling Dasar

Contoh 2: Memuat Data via JSON

Untuk aplikasi dinamis, jsTree dapat memuat data dari JSON. Pendekatan ini lebih fleksibel dan memungkinkan Anda membangun struktur pohon secara terprogram. Format JSON sederhana, dengan setiap node memiliki properti seperti "id", "text", "children", dan "state". Anda juga bisa menentukan ikon, status disabled, dan atribut lain per node. Metode ini sangat berguna ketika data pohon Anda berasal dari database atau API.

Contoh 3: Kotak Centang dan Drag & Drop

jsTree menyediakan plugin yang memperluas fungsionalitas intinya. Plugin kotak centang menambahkan kotak centang yang bisa dipilih ke setiap node, sementara plugin dnd mengaktifkan operasi drag-and-drop. Fitur ini penting untuk membangun antarmuka seperti file manager atau sistem izin di mana pengguna perlu memilih beberapa item atau mengatur ulang hierarki. Plugin mempertahankan kinerja pohon bahkan dengan ratusan node.

Fitur Lanjutan

jsTree mendukung alur kerja profesional:

  • Lazy loading: Muat node sesuai permintaan:

    Lazy Loading

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Penanganan Event: Tanggapi interaksi pohon:

    Event Listeners

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Node yang dipilih:', data.selected);
    });
  • Tema Kustom: Sesuaikan gaya pohon Anda:

    Tema Kustom

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

Kesimpulan

jsTree menyediakan solusi tangguh untuk visualisasi data hierarkis. Ideal untuk:

  • File browser: Navigasi struktur direktori
  • Menu navigasi: Buat menu multi-level
  • Antarmuka CMS: Kelola hierarki konten
  • Alat konfigurasi: Edit pengaturan bertingkat

Dengan sistem plugin yang luas dan pemeliharaan aktif, jsTree tetap menjadi solusi pilihan untuk struktur pohon di aplikasi web.

Produk Sejenis

 Indonesia