jsTree: أنشئ هياكل شجرية تفاعلية باستخدام jQuery

ما هي واجهة برمجة تطبيقات jsTree؟

تحول jsTree البيانات المعقدة بتنسيق JSON إلى هياكل شجرية تفاعلية وهرمية، مما يوفر للمطورين طريقة قوية لتصور والتنقل عبر كائنات JSON المتداخلة. كمكون إضافي لـ jQuery، تقوم بتحويل JSON الخام إلى أشجار عقد قابلة للطي/التوسيع – مثالية لفحص استجابات API أو ملفات التكوين أو أي مجموعة بيانات هرمية.

الميزات الرئيسية لتصور JSON:

• تحويل JSON إلى هيكل شجري: تعرض تلقائيًا مصفوفات/كائنات JSON كعقد أب وابن
• استكشاف تفاعلي: قم بتوسيع/طي العقد للتعمق في هياكل JSON المعقدة
• تحميل ديناميكي: تحميل مجموعات JSON الكبيرة عند الطلب لتحسين الأداء
• تخصيص عرض العقد: تصميم العقد بناءً على أنواع بيانات JSON (مصفوفات، كائنات، قيم)
• بحث وتصفية: حدد بسرعة المفاتيح/القيم في الأشجار المعقدة

على عكس عارضات JSON المسطحة، تحافظ jsTree على التسلسل الهرمي والعلاقات في بياناتك، مما يجعلها مثالية لتصحيح أخطاء APIs أو توثيق هياكل JSON المتداخلة.

إحصائيات جيثب

اسم:
لغة:
النجوم:
الشوك:
رخصة:
تم تحديث المستودع آخر مرة في

لماذا تختار jsTree؟

• حل مجرب: أكثر من 10 سنوات من التطوير النشط
• خفيف الوزن: يتطلب فقط jQuery كاعتمادية
• يمكن الوصول إليه: متوافق مع WCAG 2.0
• توثيق شامل: مرجع كامل لواجهة برمجة التطبيقات
• مرخص بـ MIT: مجاني للاستخدام التجاري

التثبيت

يمكن تثبيت jsTree عبر مدير الحزم أو تضمينه مباشرة من CDN.

npm install jstree

ملاحظة: لا تنس تضمين jQuery قبل jsTree.

أمثلة برمجية

استكشف إمكانيات jsTree مع هذه الأمثلة:

المثال 1: شجرة أساسية من HTML

أبسط طريقة لإنشاء شجرة jsTree هي تحويل قوائم HTML المتداخلة. هذا الأسلوب مثالي عندما يكون هيكل الشجرة ثابتًا أو عند إنشاء نموذج أولي. تقوم الإضافة تلقائيًا بتحويل هيكل UL/LI المتداخل إلى شجرة تفاعلية مع وظيفة التوسيع/الطي. يتطلب التنفيذ الأساسي حدًا أدنى من JavaScript ويعمل بشكل جيد لقوائم التنقل البسيطة أو هياكل المحتوى.

الميزات الموضحة:

• تحويل HTML إلى شجرة
• وظيفة التوسيع/الطي
• تنسيق أساسي

المثال 2: تحميل البيانات عبر JSON

للتطبيقات الديناميكية، يمكن لـ jsTree تحميل البيانات من JSON. هذا الأسلوب أكثر مرونة ويسمح لك ببناء هيكل الشجرة برمجيًا. تنسيق JSON مباشر، حيث تحتوي كل عقدة على خصائص مثل "id" و"text" و"children" و"state". يمكنك أيضًا تحديد الأيقونات والحالات المعطلة والسمات الأخرى لكل عقدة. هذه الطريقة مفيدة بشكل خاص عندما تأتي بيانات الشجرة من قاعدة بيانات أو API.

المثال 3: مربعات الاختيار والسحب والإفلات

توفر jsTree إضافات تمدد وظائفها الأساسية. تضيف إضافة مربعات الاختيار مربعات اختيار قابلة للتحديد إلى كل عقدة، بينما تمكن إضافة dnd من عمليات السحب والإفلات. هذه الميزات ضرورية لبناء واجهات مثل مديري الملفات أو أنظمة الأذونات حيث يحتاج المستخدمون إلى تحديد عناصر متعددة أو إعادة تنظيم التسلسل الهرمي. تحافظ الإضافات على أداء الشجرة حتى مع مئات العقد.

ميزات متقدمة

يدعم jsTree سير العمل الاحترافي:

• تحميل عند الطلب: تحميل العقد عند الحاجة:

  تحميل عند الطلب

  
      $('#tree').jstree({
        'core': {
          'data': {
            'url': '/nodes/',
            'data': function (node) {
              return { 'id': node.id };
            }
          }
        }
      });
      
  

• معالجة الأحداث: الاستجابة لتفاعلات الشجرة:

  مستمعو الأحداث

  
      $('#tree').on('changed.jstree', function (e, data) {
        console.log('العقد المحددة:', data.selected);
      });
      
  

• سمات مخصصة: صمم شجرتك:

  سمة مخصصة

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

الختام

توفر jsTree حلاً قويًا لتصور البيانات الهرمية. مثالية لـ:

• متصفحات الملفات: التنقل عبر هياكل الدلائل
• قوائم التنقل: إنشاء قوائم متعددة المستويات
• واجهات CMS: إدارة التسلسلات الهرمية للمحتوى
• أدوات التكوين: تعديل الإعدادات المتداخلة

مع نظام الإضافات الواسع والصيانة النشطة، تظل jsTree الحل الأمثل للهياكل الشجرية في تطبيقات الويب.

منتجات مماثلة