jsTree: בניית מבני עץ אינטראקטיביים עם jQuery

מהו API של jsTree?

jsTree ממיר נתוני JSON מורכבים למבני עץ אינטראקטיביים והיררכיים, ומציע למפתחים דרך עוצמתית להציג ולנווט באובייקטי JSON מקוננים. כתוסף jQuery, הוא ממיר JSON גולמי לעצי צמתים הניתנים להרחבה/כיווץ - מושלם לבדיקת תגובות API, קבצי תצורה או כל מערך נתונים היררכי.

תכונות מפתח להדמיית JSON:

• המרת JSON לעץ: מציג אוטומטית מערכים/אובייקטים של JSON כצמתים הורים/ילדים
• חקירה אינטראקטיבית: הרחב/כווץ צמתים כדי לצלול לתוך מבני JSON עמוקים
• טעינה דינמית: טעינה עצלה (lazy loading) של מערכי JSON גדולים
• עיצוב צמתים מותאם: מעצב צמתים לפי סוגי נתוני JSON (מערכים, אובייקטים, ערכים)
• חיפוש וסינון: מצא במהירות מפתחות/ערכים בעצי JSON מורכבים

בניגוד לצופי JSON שטוחים, jsTree שומר על ההיררכיה והיחסים בנתונים שלך, מה שהופך אותו לאידיאלי לאיתור באגים ב-APIs או תיעוד סכימות JSON מקוננות.

סטטיסטיקות GitHub

שֵׁם:
שפה:
כוכבים:
מזלגות:
רישיון:
המאגר עודכן לאחרונה ב

למה לבחור ב-jsTree?

• פיתרון מוכח: 10+ שנות פיתוח פעיל
• קל משקל: דורש רק את jQuery כתלות
• נגיש: תואם ל-WCAG 2.0
• תיעוד מקיף: הפניה מלאה ל-API
• רישיון 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 נותר הפתרון המועדף למבני עץ ביישומי אינטרנט.

מוצרים דומים