1. Ürünler
  2.   Görüntüleyici
  3.   JavaScript
  4.   jsTree
 
  

jsTree: jQuery ile Etkileşimli Ağaç Yapıları Oluşturun

Bu güçlü ağaç eklentisiyle hiyerarşik veriler oluşturun, yönetin ve görselleştirin.

jsTree API Nedir?

jsTree, karmaşık JSON verilerini etkileşimli, hiyerarşik ağaç yapılarına dönüştürerek geliştiricilere iç içe geçmiş JSON nesnelerini görselleştirme ve gezinme için güçlü bir yol sunar. jQuery eklentisi olarak oluşturulmuştur, ham JSON'u genişletilebilir/katlanabilir düğümlere dönüştürür - API yanıtlarını, yapılandırma dosyalarını veya herhangi bir hiyerarşik veri kümesini incelemek için idealdir.

JSON görselleştirme için temel özellikler:

  • JSON'dan Ağaca Dönüşüm: JSON dizilerini/nesnelerini otomatik olarak ebeveyn/çocuk düğümleri olarak işler
  • Etkileşimli Keşif: Derin JSON yapılarını incelemek için düğümleri genişletin/katlayın
  • Dinamik Yükleme: Büyük JSON veri kümelerini tembel yükleme ile performansı optimize edin
  • Özel Düğüm İşleme: JSON veri türlerine göre düğümleri stilize edin (diziler, nesneler, değerler)
  • Arama & Filtreleme: Karmaşık JSON ağaçlarında hızlıca anahtar/değer bulun

Düz JSON görüntüleyicilerin aksine, jsTree verilerinizdeki hiyerarşiyi ve ilişkileri korur, bu da onu API hata ayıklama veya iç içe JSON şemalarını belgeleme için ideal kılar.

GitHub

GitHub İstatistikleri

İsim:
Dil:
Yıldızlar:
Çatallar:
Lisans:
Depo en son şu tarihte güncellendi:

Neden jsTree'yi Seçmelisiniz?

  • Kanıtlanmış Çözüm: 10+ yıllık aktif geliştirme
  • Hafif: Yalnızca jQuery bağımlılığı gerektirir
  • Erişilebilir: WCAG 2.0 uyumlu
  • Kapsamlı Dokümantasyon: Tam API referansı
  • MIT Lisansı: Ticari kullanım için ücretsiz

Kurulum

jsTree, paket yöneticileri aracılığıyla kurulabilir veya doğrudan CDN'den eklenebilir.

NPM Kurulumu


npm install jstree

Not: jsTree'den önce jQuery'yi eklemeyi unutmayın.

Kod Örnekleri

jsTree'nin yeteneklerini bu örneklerle keşfedin:

jsTree

Örnek 1: HTML'den Temel Ağaç

Bir jsTree oluşturmanın en basit yolu, iç içe geçmiş HTML listelerini dönüştürmektir. Bu yaklaşım, ağaç yapınız statik olduğunda veya prototip oluştururken idealdir. Eklenti, iç içe geçmiş UL/LI yapısını otomatik olarak genişletme/katlama işlevine sahip etkileşimli bir ağaca dönüştürür. Temel uygulama minimum JavaScript gerektirir ve basit gezinme menüleri veya içerik yapıları için iyi çalışır.

Gösterilen Özellikler:

  • HTML'den Ağaca Dönüşüm
  • Genişletme/Katlama İşlevi
  • Temel Tema

Örnek 2: JSON Üzerinden Veri Yükleme

Dinamik uygulamalar için jsTree, JSON'dan veri yükleyebilir. Bu yaklaşım daha esnektir ve ağaç yapısını programlı olarak oluşturmanıza olanak tanır. JSON formatı sezgiseldir, her düğümün "id", "text", "children" ve "state" gibi özellikleri vardır. Ayrıca her düğüm için simgeler, devre dışı durumlar ve diğer nitelikleri belirtebilirsiniz. Bu yöntem özellikle ağaç verileriniz bir veritabanından veya API'den geldiğinde kullanışlıdır.

Örnek 3: Onay Kutuları ve Sürükle-Bırak

jsTree, temel işlevselliğini genişleten eklentiler sağlar. Onay kutusu eklentisi her düğüme seçilebilir onay kutuları eklerken, dnd eklentisi sürükle-bırak işlemlerine izin verir. Bu özellikler, kullanıcıların birden fazla öğe seçmesi veya hiyerarşiyi yeniden düzenlemesi gereken dosya yöneticileri veya izin sistemleri gibi arayüzler oluşturmak için gereklidir. Eklentiler, yüzlerce düğüm olsa bile ağacın performansını korur.

Gelişmiş Özellikler

jsTree profesyonel iş akışlarını destekler:

  • Tembel Yükleme: Düğümleri isteğe bağlı yükleyin:

    Tembel Yükleme

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Olay İşleme: Ağaç etkileşimlerine yanıt verin:

    Olay Dinleyicileri

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Seçili düğümler:', data.selected);
    });
  • Özel Temalar: Ağacınızı özelleştirin:

    Özel Tema

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

Sonuç

jsTree, hiyerarşik veri görselleştirme için sağlam bir çözüm sunar. Şunlar için idealdir:

  • Dosya gezginleri: Dizin yapılarında gezinin
  • Gezinme menüleri: Çok seviyeli menüler oluşturun
  • CMS arayüzleri: İçerik hiyerarşilerini yönetin
  • Yapılandırma araçları: İç içe ayarları düzenleyin

Kapsamlı eklenti sistemi ve aktif bakımı ile jsTree, web uygulamalarındaki ağaç yapıları için tercih edilen çözüm olmaya devam ediyor.

Benzer Ürünler

 Türkçe