Construisez un arbre ajax avec yui

J'ai omis les URL de l'exemple de code ci-dessus car ils sont extrêmement longs, et il est préférable de construire votre propre URL avec les fonctionnalités dont vous avez besoin. L'avantage est que vous pouvez facilement inclure les autres composants YUI dont vous avez besoin sans ajouter de feuilles de style ou de fichiers de script supplémentaires. Retournez simplement à l'application de configuration et générez un nouvel ensemble de liens!

Copiez simplement l'extrait HTML que vous recevez dans la tête de votre document, et vous êtes prêt à commencer par YUI.

Création de l'arborescence initiale

La première étape consiste à créer une fonction qui construira le widget TreeView

La première étape consiste à créer une fonction qui construira l'objet Widget TreeView. Initialement, il ne contiendra qu'un seul nœud de texte contenant l'étiquette «Apple». Lorsque l'utilisateur clique sur ce nœud, notre code créera un sous-arbre en dessous, en le remplissant avec des synonymes pour «Apple».

Dans le fragment de code suivant, remarquez d'abord les lignes sans gras. Nous créons l'arbre avec le constructeur de TreeView, dont l'argument est l'élément HTML dans lequel nous allons construire l'arbre (ajaxtreediv). L'appel Getroot reçoit une référence à la racine de l'arbre et la transmet au constructeur du TextNode. Donner la racine au nouveau nœud relie l'arbre; Il crée un lien vers le parent. Nous faisons le dessin réel de l'arbre avec sa méthode de rendu.

Nous commençons par déclarer certaines variables. OBNODE sera l'objet Node, Obajaxtree sera l'objet Tree, et Treeroot sera utilisé pour conserver une référence au nœud racine de l'arbre.

Nous appelons le constructeur de TreeView (Yahoo.Widget.treeView), passant dans l'élément HTML dans lequel nous voulons construire l'arbre (Ajaxtreediv). attention. La méthode SetDynamiCload indique à l'arbre que nous voulons savoir quand l'utilisateur clique sur l'un de ses nœuds pour l'étendre, et il indique à l'arbre quelle fonction appelle (MakeMoReNodes, que nous écrivons sous peu) lorsque ces clics se produisent:

function buildAjaxTree() {   var obNode;  var obAjaxTree;  var treeRoot;    obAjaxTree = new YAHOO.widget.TreeView ("AjaxTreeDiv");  <em>obAjaxTree.setDynamicLoad(makeMoreNodes,0);</em>  treeRoot = obAjaxTree.getRoot();  obNode = new YAHOO.widget.TextNode("apple", treeRoot, false);  obAjaxTree.render();}

Après cette option, nous stockons une référence à la racine de l'arbre dans TreeRoot et créons un nouveau texte. Le passage de la variable Treeroot au constructeur TextNode relie le nœud avec l'arborescence. Enfin, nous appelons la méthode de rendu pour afficher l'arborescence.

Remarquez que tout ce code se trouve à l'intérieur d'une fonction, que nous avons appelée BuilaJaxtree. Voici l'instruction qui l'appellera:

YAHOO.util.Event.onDOMReady(buildAjaxTree);

Il s'agit de la première instruction de notre code qui sera exécutée. La méthode OnDomReady appelle BuilaJaxtree lorsque la page HTML est entièrement chargée. L'exécution de notre script avant ce point inviterait les erreurs.

Faire plus de nœuds avec les appels ajax

Maintenant, parcourons la fonction MakeMoRenodes. Tout d'abord, reportez-vous à l'aperçu de l'objet de rappel décrit au début de cet article. N'oubliez pas que notre appel Ajax (AsyncRequest) a besoin d'un objet de rappel avec des méthodes de succès et d'échec, afin qu'il puisse appeler l'une de ces méthodes après sa mission de collecte de données. La plupart du code à l'intérieur de MakeMoRenodes fonctionne pour créer cet objet de rappel.

Voici l'objet de rappel que nous utiliserons. Comparez-le avec l'objet de rappel générique que nous avons vu lors de l'introduction d'AsynCrequest:

function buildAjaxTree() {   var obNode;  var obAjaxTree;  var treeRoot;    obAjaxTree = new YAHOO.widget.TreeView ("AjaxTreeDiv");  <em>obAjaxTree.setDynamicLoad(makeMoreNodes,0);</em>  treeRoot = obAjaxTree.getRoot();  obNode = new YAHOO.widget.TextNode("apple", treeRoot, false);  obAjaxTree.render();}

Les propriétés de succès et de défaillance se réfèrent aux méthodes qu'AsynCrequest appellera après qu'il interroge notre script de thésaurus côté serveur. Nous appellerons la fonction FoundSynonymes si le script PHP réussit à tirer certains synonymes, ou le rappel FoundNosynonymes si le script PHP échoue dans sa recherche. Notez que la propriété Timeout est un facteur dans ce cas de défaillance: AsynCrequest signale un échec s'il ne reçoit pas les résultats en sept secondes (7 000 millisecondes) de l'appel.

La propriété d'argument

La méthode AsynCrequest exige que la propriété d'argument fasse partie de l'objet de rappel. N'oubliez pas que la propriété d'argument contient les données nécessaires par les fonctions de succès et de défaillance appelées par AsyncRequest. Pour notre exemple, avant l'appel AJAX, nous stockons le nœud cliqué par l'utilisateur dans l'argument. La méthode de réussite a besoin de ce nœud pour deux raisons. Premièrement, pour construire le nouveau synonyme de sous-arbre: un nœud racine est nécessaire pour cela, et le nœud cliqué par l'utilisateur sera cette racine. Deuxièmement, pour dire au nœud que nous avons fini de l'utiliser, via sa méthode LoadComplete. Si nous n'avons pas tiré cette méthode, l'arbre gèle, car l'un de ses nœuds ne saurait pas quand reprendre l'écoute des clics de la souris de l'utilisateur.

La méthode de défaillance doit avoir accès au nœud cliqué pour la même raison. Même si la méthode de défaillance n'ajoute aucun nœud à l'arborescence, le nœud sur lequel l'utilisateur a cliqué a encore besoin de sa méthode de chargement, afin qu'il puisse recommencer à écouter les clics de l'utilisateur.

Questions fréquemment posées (FAQ) sur Yui TreeView et Ajax

Qu'est-ce que Yui TreeView et comment fonctionne-t-il avec Ajax?

Yui TreeView est un outil puissant qui vous permet de créer une structure d'arbre dans votre application Web. Il fait partie de la bibliothèque de l'interface utilisateur Yahoo (YUI), qui est un ensemble d'utilitaires et de contrôles, écrits en JavaScript, pour créer des applications Web richement interactives. Ajax, en revanche, signifie JavaScript asynchrone et XML. Il s'agit d'un ensemble de techniques de développement Web utilisant de nombreuses technologies Web sur le côté client pour créer des applications Web asynchrones. Lorsque Yui TreeView est combiné avec AJAX, il permet la création de structures d'arbres dynamiques et extensibles qui peuvent charger des données à la demande, améliorant l'efficacité et l'expérience utilisateur de votre application Web.

Comment puis-je implémenter Yui TreeView avec AJAX dans votre application Web? Tout d'abord, vous devez inclure la bibliothèque YUI dans votre projet. Ensuite, vous devez créer une nouvelle instance de la classe TreeView et définir la structure de votre arbre. Après cela, vous pouvez utiliser Ajax pour charger les données dans l'arborescence dynamiquement. Cela implique de configurer une demande AJAX pour récupérer les données du serveur, puis d'utiliser les données de réponse pour créer de nouveaux nœuds dans l'arborescence.

Quels sont les avantages de l'utilisation de Yui TreeView avec Ajax?

L'utilisation de Yui TreeView avec AJAX offre plusieurs avantages. Tout d'abord, il permet la création de structures d'arbres dynamiques et extensibles qui peuvent charger des données à la demande. Cela peut considérablement améliorer l'efficacité et l'expérience utilisateur de votre application Web. Deuxièmement, il fournit un niveau élevé de personnalisation, vous permettant de créer une structure d'arbre qui correspond à vos besoins spécifiques. Enfin, il fait partie de la bibliothèque YUI, qui est un ensemble d'outils bien documentés et largement utilisés pour le développement Web.

Y a-t-il des alternatives à Yui TreeView pour créer des structures d'arbres dans les applications Web?

Oui, il existe plusieurs alternatives à Yui TreeView pour créer des structures d'arbres dans les applications Web. Certains des plus populaires incluent JQuery TreeView, JStree et FancyTree. Ces outils offrent des fonctionnalités similaires à Yui TreeView, mais elles ont chacune leurs propres fonctionnalités et avantages uniques.

Puis-je utiliser Yui TreeView avec d'autres bibliothèques JavaScript comme jQuery ou React?

Oui, vous pouvez utiliser Yui TreeView avec d'autres bibliothèques JavaScript comme jQuery ou React. Cependant, il est important de noter que Yui TreeView fait partie de la bibliothèque YUI, qui a son propre ensemble de services publics et de contrôles. Par conséquent, vous devrez peut-être faire des travaux supplémentaires pour vous assurer que Yui TreeView fonctionne correctement avec d'autres bibliothèques.

Comment puis-je personnaliser l'apparence de mon Yui TreeView?

Vous pouvez personnaliser l'apparence de votre Yui TreeView en utilisant CSS. La bibliothèque YUI fournit un ensemble de classes CSS que vous pouvez utiliser pour styliser votre arbre. Vous pouvez également créer vos propres classes CSS personnalisées si vous avez besoin de plus de contrôle sur l'apparence de votre arbre.

Quel type de données puis-je charger dans mon Yui Treeview en utilisant Ajax?

Vous pouvez charger n'importe quel type de données dans votre Yui TreeView en utilisant AJAX, tant qu'elles peuvent être représentées comme une structure d'arbre. Cela inclut les données des bases de données, des fichiers XML, des fichiers JSON, etc. Le chargement des données à partir d'un script côté serveur, vous pouvez créer une structure d'arborescence dynamique qui représente le système de fichiers sur votre serveur.

Comment puis-je gérer les erreurs lors du chargement des données dans mon Yui TreeView en utilisant Ajax?

Vous pouvez gérer les erreurs lorsque vous chargez des données dans votre Yui TreeView en utilisant AJAX en configurant un gestionnaire d'erreurs dans votre demande Ajax. Ce gestionnaire d'erreurs peut assister à toutes les erreurs qui se produisent pendant la demande et afficher un message approprié à l'utilisateur.

Puis-je utiliser Yui TreeView avec Ajax dans une application Web mobile?

Oui, vous pouvez utiliser Yui TreeView avec AJAX dans une application Web mobile. La bibliothèque YUI est conçue pour être réactive et fonctionne bien sur une variété d'appareils, y compris les téléphones portables et les tablettes. Cependant, vous devrez peut-être effectuer des ajustements pour vous assurer que votre structure d'arbre est facile à naviguer sur un petit écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!