jsTree: Δημιουργήστε Διαδραστικά Δέντρα με jQuery

Τι είναι το jsTree API;

Το jsTree μετατρέπει πολύπλοκα δεδομένα JSON σε διαδραστικές, ιεραρχικές δομές δέντρων, προσφέροντας στους προγραμματιστές έναν ισχυρό τρόπο οπτικοποίησης και πλοήγησης σε ένθετα αντικείμενα JSON. Ως πρόσθετο jQuery, μετατρέπει τα ακατέργαστα δεδομένα JSON σε δέντρα με αναπτύξιμους/συμπτύξιμους κόμβους - ιδανικά για επιθεώρηση αποκρίσεων API, αρχείων ρυθμίσεων ή οποιουδήποτε ιεραρχικού συνόλου δεδομένων.

Βασικές λειτουργίες για οπτικοποίηση JSON:

• Μετατροπή JSON σε δέντρο: Αποδίδει αυτόματα πίνακες/αντικείμενα JSON ως γονικούς/παιδικούς κόμβους
• Διαδραστική εξερεύνηση: Αναπτύξτε/Συμπτύξτε κόμβους για εμβάθυνση σε πολύπλοκες δομές JSON
• Δυναμική φόρτωση: Φόρτωση μεγάλων συνόλων δεδομένων 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: Κουτιά ελέγχου και Drag & Drop

Το jsTree παρέχει πρόσθετα που επεκτείνουν τη βασική του λειτουργικότητα. Το πρόσθετο κουτιών ελέγχου προσθέτει επιλέξιμα κουτιά ελέγχου σε κάθε κόμβο, ενώ το πρόσθετο dnd ενεργοποιεί λειτουργίες drag-and-drop. Αυτές οι λειτουργίες είναι απαραίτητες για τη δημιουργία διεπαφών όπως διαχειριστές αρχείων ή συστήματα δικαιωμάτων όπου οι χρήστες χρειάζεται να επιλέξουν πολλαπλά στοιχεία ή να αναδιοργανώσουν την ιεραρχία. Τα πρόσθετα διατηρούν την απόδοση του δέντρου ακόμα και με εκατοντάδες κόμβους.

Προηγμένες Λειτουργίες

Το 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 παραμένει η προτιμώμενη λύση για δομές δέντρων σε εφαρμογές web.

Παρόμοια Προϊόντα