Αυτή η ανάρτηση επεξεργάστηκε τελευταία φορά από το szxiaxiaojun στις 2019-7-11 11:20
Στην καθημερινή ανάπτυξη έργων ιστού, συναντάμε συχνά την εμφάνιση δεδομένων δομής δέντρου, τα οποία λαμβάνονται από τη βάση δεδομένων και εμφανίζονται σε σχήμα δέντρου. Για ευκολία, μπορούμε να γράψουμε ένα στοιχείο ελέγχου δέντρου μεταξύ προγραμμάτων περιήγησης για JavaScript που μπορεί να επαναχρησιμοποιηθεί στο μέλλον. Αυτή η ενότητα μοιράζεται μια προσθήκη δέντρου JS που αναπτύχθηκε μόνος του, την οποία μπορείτε να κατεβάσετε και να χρησιμοποιήσετε απευθείας για φίλους που έχουν ανάγκη. Το πρόσθετο δέντρου πρέπει να εφαρμοστεί (1) Οργανώστε αυτόματα τα δεδομένα σε σχέσεις υφισταμένων, έτσι ώστε να μην χρειάζεται να οργανώσουμε τη σχέση μεταξύ ανωτέρων και υφισταμένων προσθέτοντας χειροκίνητα δεδομένα ή λαμβάνοντας δεδομένα από τη βάση δεδομένων στο front-end (2) Υποστήριξη προσαρμοσμένου δέντρου καταλόγου φόρτωσης Υποστήριξη φόρτωσης δεδομένων σε μορφές XML και JSON (3) Πραγματοποιήστε τη λειτουργία επιλογής κόμβων δέντρων (μονή επιλογή, πολλαπλή επιλογή [επιλογή καταρράκτη]). (4) Υποστήριξη εφάπαξ φόρτωσης μεγάλων δεδομένων 。。。。。。 Ας αρχίσουμε να μοιραζόμαστε ένα πρόσθετο Tree που έγραψα: Αυτό το πρόσθετο βασίζεται στο Jquery και χρειάζεται αναφορές
Πρώτον: Η παράμετρος JSON αντικείμενο κάθε κόμβου δέντρου στην προσθήκη φαίνεται παρακάτω nodeItem: συνάρτηση () {
επιστροφή {
nodecode: "", // κωδικός κόμβου
nodetext: "", // κείμενο κόμβου [κείμενο εμφάνισης κόμβου]
nodetitle: "", // τίτλος κόμβου [κείμενο κόμβου για την κίνηση του ποντικιού παρωχημένη εμφάνιση]
supnodecode: "", // Ανώτερος κωδικός κόμβου [ορίστε τον κωδικό γονικού κόμβου στον οποίο ανήκει αυτός ο κόμβος και σχηματίστε μια δευτερεύουσα σχέση μέσω αυτού του κώδικα]
nodeurl: Το "", // node URL αντιπροσωπεύει τη διεύθυνση URL του συνδέσμου που έχει προσαρμοστεί από τον τρέχοντα κόμβο
iconexpand: "", // Εικονίδιο επέκτασης κόμβου [Εικονίδιο που εμφανίζεται στον κόμβο δέντρου καταλόγου στην προσαρμοσμένη αναπτυγμένη κατάσταση, εάν είναι κενό, χρησιμοποιείται το προεπιλεγμένο εικονίδιο]
iconcollapse: "" // Εικονίδιο συρρίκνωσης κόμβου [Το εικονίδιο εμφανίζεται στον κόμβο δέντρου καταλόγου σε προσαρμοσμένη κατάσταση συρρίκνωσης, εάν είναι κενό, χρησιμοποιείται το προεπιλεγμένο εικονίδιο]
}
} Δεύτερον: Τρεις τρόποι φόρτωσης του δέντρου καταλόγου 1. loadJson(Json) Πίνακας κόμβων δέντρου καταλόγου αντικειμένων JSON (ολοκληρώθηκε ταυτόχρονα) Η μορφή JSON είναι ένας πίνακας ορισμάτων για κάθε στοιχείο ενός αντικειμένου nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) δεδομένα κόμβου μορφής συμβολοσειράς XML (εφάπαξ ολοκλήρωση)
Σημείωση: Χρήση μορφής συμβολοσειράς XML Σημειώστε ότι ο κόμβος tagName:nodecode nodetext κ.λπ. δεν επιτρέπεται να αλλάξει, επειδή το πρόγραμμα λαμβάνεται απευθείας χρησιμοποιώντας αυτό το όνομα
<root>
<item> // Κάθε κόμβος περιέχει πολλαπλές τιμές δεδομένων
<nodecode><![CDATA[τιμή κωδικοποίησης κόμβου]]></nodecode>
<nodetext><![CDATA[κείμενο ονόματος κόμβου]]]></nodetext>
<nodetitle><![CDATA[μετακίνηση ποντικιού κόμβου στο κείμενο προτροπής εμφάνισης]]></nodetitle>
<supnodecode><![CDATA[Γονική κωδικοποίηση κόμβου]]></supnodecode>
<nodeurl><![CDATA[Διεύθυνση συνδέσμου που σχετίζεται με τον κόμβο]]></nodeurl>
<iconexpand><![CDATA[Εμφάνιση διαδρομής εικονιδίου κατά την επέκταση του κόμβου]]></iconexpand>
<iconcollapse><![CDATA[Εμφάνιση διαδρομής εικονιδίου όταν ο κόμβος συρρικνώνεται]]></iconcollapse>
</item> ... ...
</root>
3. Προσθέστε στοιχεία κόμβου χειροκίνητα ένα προς ένα (δύο βήματα για να ολοκληρώσετε) μέσω της μεθόδου addNodeItem(nodeItem) μέσω της μεθόδου των αντικειμένων προσθήκης
Μπορείτε να δημιουργήσετε ένα δέντρο καλώντας αυτή τη μέθοδο χειροκίνητα μέσω του αντικειμένου προσθήκης makeTree().
Τρίτον: Μέθοδος συμβάντος για την αναδιοργάνωση της σχέσης μεταξύ υφισταμένων και υφισταμένων εντός του δέντρου καταλόγου Μέσω αυτής της μεθόδου, μπορούμε να λύσουμε το πρόβλημα ότι το front-end μας δεν χρειάζεται πλέον να διακρίνει ανάλογα με τη σχέση μεταξύ υφισταμένων και υφισταμένων. Τέταρτον: Τα παραπάνω είναι μόνο μια σύντομη εισαγωγή στις κύριες μεθόδους φόρτωσης και αναδιοργάνωσης του Tree. Παρακάτω θα δημοσιεύσουμε τον πλήρη κώδικα του πρόσθετου JS με αναλυτικά σχόλια στον κώδικα Λειτουργίες προσθήκης: έλεγχος, μεμονωμένη, επέκταση, δίπλωμα, εμφάνιση/απόκρυψη σύνδεσης κόμβου, υποστήριξη εισαγωγής κόμβων, διαγραφή κόμβων, προσαρμογή εικονιδίων κόμβων, ρύθμιση επιλογής κόμβου, λήψη κόμβων επιλογής δέντρου καταλόγου (υποστήριξη XML, JSON κ.λπ.) Μενού με δεξί κλικ (δεν υποστηρίζεται προς το παρόν, επειδή πρέπει να χρησιμοποιηθεί το αναδυόμενο επίπεδο, αυτή η λειτουργία αποκλείεται και αφαιρείται) Υποστήριξη κλικ κόμβου, διπλό κλικ, συμβάντα αλλαγής επιλογής κόμβου κ.λπ Το τελικό εφέ οθόνης Λήψη συνημμένου:
Tree_Demo.rar
(54.71 KB, Αριθμός λήψεων: 1)
| 
Δημοσιεύτηκε στις 11/7/2019 11:20:12 π.μ.
|
|
|
|
