Ce post a été modifié pour la dernière fois par szxiaxiaojun le 11-07-2019 à 11:20
Dans le développement quotidien de projets web, nous rencontrons souvent l’affichage de données de structure arborescente, qui sont obtenues à partir de la base de données et affichées sous forme d’arbre. Pour plus de commodité, nous pouvons écrire un contrôle arborescente multi-navigateurs pour JavaScript qui pourra être réutilisé à l’avenir. Cette section partage un plugin d’arbre JS développé par vous-même, qui peut être téléchargé et utilisé directement pour les amis dans le besoin. Le plugin arbre doit être implémenté (1) Organiser automatiquement les données en relations subordonnées, afin de ne pas avoir à organiser la relation entre supérieurs et subordonnés en ajoutant manuellement des données ou en obtenant des données de la base de données en front-end (2) Prise en charge de l’arbre de répertoires personnalisé Support du chargement de données aux formats XML et JSON (3) Réaliser la fonction de sélection des nœuds arboricoles (sélection unique, sélection multiple [sélection en cascade]). (4) Prise en charge unique du big data 。。。。。。 Commençons à partager un plugin Tree que j’ai écrit : ce plugin est basé sur Jquery et nécessite des références
Premièrement : L’objet JSON du paramètre de chaque nœud arbre dans le plugin est montré ci-dessous nodeItem : function () {
return {
code de nœud : « », // code de nœud
Nodetext : « », // Texte du nœud [nœud affichage texte]
NodeTitle : « », // Titre du nœud [Texte du nœud pour le mouvement de la souris Affichage obsolète]
supnodecode : « », // Code de nœud supérieur [définissez le code de nœud parent auquel ce nœud appartient, et formez une relation subordonnée via ce code]
nodeurl : « », // URL du nœud représente l’adresse URL du lien personnalisée par le nœud actuel
iconexpand : « », // Icône d’expansion de nœud [Icône affichée dans le nœud de l’arbre de répertoires dans l’état étendu personnalisé, si elle est vide, l’icône par défaut est utilisée]
iconcollapse : « " // Node Shrink Icon [Icône affichée dans le nœud de l’arbre de répertoires en état de réduction personnalisé, si elle est vide, l’icône par défaut est utilisée]
}
} Deuxièmement : trois façons de charger l’arbre de répertoires 1. loadJson(Json) tableau de nœuds arbre de l’arbre de l’architoir d’objets JSON (terminé à un moment donné) Le format JSON est un tableau d’arguments pour chaque élément d’un objet nodeItem
[ { nodecode : « », nodetext : « », nodetitle : « »,supnodecode : « »,nodeurl : « »,iconexpand : « » ,iconcollapse : « » },
{},...
]
2. Données de nœud au format de chaîne XML loadXml(xml) (complétion unique)
Note : Utilisez le format de chaîne XML Notez que le nœud tagName :nodecode nodetext, etc. ne peut pas être modifié, car le programme est directement obtenu en utilisant ce nom
<root>
<item> // Chaque nœud contient plusieurs valeurs de données
<nodecode>< ![CDATA[valeur d’encodage de nœud]></nodecode>
<nodetext>< ![CDATA[nom du nœud texte]]]></nodetext>
<nodetitle>< ![CDATA[mouvement de la souris dans le texte d’affichage]]></nodetitle>
<supnodecode>< ![CDATA[Codage du parent nœud]></supnodecode>
<nodeurl>< ![CDATA[Adresse du lien associé au nœud]></nodeurl>
<iconexpand>< ![CDATA[Afficher le chemin de l’icône lorsque le nœud s’est étendu]] ></iconexpand>
<iconcollapse>< ![CDATA[Afficher le chemin de l’icône lorsque le nœud rétrécit]></iconcollapse>
</item> ... ...
</root>
3. Ajouter manuellement les éléments de nœud un par un (deux étapes à compléter) via la méthode addNodeItem(nodeItem) via la méthode des objets plug-in
Vous pouvez créer un arbre en appelant cette méthode manuellement via l’objet plugin makeTree().
Troisièmement : Méthode d’événement pour réorganiser la relation entre subordonnés et subordonnés au sein de l’arbre de répertoires Grâce à cette méthode, nous pouvons résoudre le problème selon lequel notre front-end n’a plus besoin de distinguer selon la relation entre subordonnés et subordonnés. Quatrième : Ce qui précède n’est qu’une brève introduction aux principales méthodes de chargement et de réorganisation de Tree. Ci-dessous, nous publierons le code complet du plugin JS avec des commentaires détaillés dans le code Fonctions du plug-in : vérifier, uniquer, développer, plier, montrer/cacher la connexion des nœuds, supporter l’insertion de nœuds, supprimer les nœuds, personnaliser les icônes des nœuds, définir la sélection des nœuds, obtenir les nœuds de sélection de l’arbre de répertoires (support XML, JSON, etc.) Menu clic droit (non supporté pour le moment, car il faut utiliser la couche contextuelle, cette fonction est bloquée et supprimée) Prise en charge des cliquages de nœuds, double-clics, changements de sélection de nœuds, etc L’effet final d’affichage Téléchargement des pièces jointes :
Tree_Demo.rar
(54.71 KB, Nombre de téléchargements: 1)
| 
Publié sur 11/07/2019 11:20:12
|
|
|
|
