Bauen Sie einen Ajax -Baum mit Yui

Ich habe die URLs aus dem obigen Codebeispiel ausgelassen, da sie extrem lang sind, und es ist am besten, Ihre eigene URL mit der Funktionalität zu konstruieren, die Sie benötigen. Der Vorteil davon ist, dass Sie problemlos alle anderen YUI -Komponenten einfügen können, die Sie benötigen, ohne zusätzliche Stilblätter oder Skriptdateien hinzuzufügen. Gehen Sie einfach zur Konfigurations -App zurück und generieren Sie einen neuen Satz von Links! Zunächst enthält es nur einen Textknoten, der das Etikett „Apple“ enthält. Wenn der Benutzer auf diesen Knoten klickt, erstellt unser Code einen Unterbaum darunter und füllt ihn mit Synonymen für „Apple“ aus. Wir erstellen den Baum mit dem Konstruktor des Treeview, dessen Argument das HTML -Element ist, in dem wir den Baum bauen (ajaxTeediv). Der GetRoot -Anruf empfängt einen Verweis auf die Wurzel des Baumes und gibt ihn an den Konstruktor des TextNode weiter. Das Angeben der Wurzel dem neuen Knoten verbindet den Baum; Es erstellt einen Link zurück zum Elternteil. Wir machen die tatsächliche Zeichnung des Baumes mit seiner Render -Methode.

Wir beginnen damit, einige Variablen zu deklarieren. Obnode wird das Knotenobjekt sein, Obajaxtree wird das Baumobjekt sein, und Treeroot wird verwendet, um einen Hinweis auf den Wurzelknoten des Baumes zu halten. die meiste unserer Aufmerksamkeit. Die SetDyNamicload -Methode gibt dem Baum mit, dass wir wissen möchten, wann der Benutzer auf einen seiner Knoten klickt, um ihn zu erweitern, und er sagt dem Baum, welche Funktion zu rufen (Makemorenoden, die wir in Kürze schreiben werden), wenn diese Klicks passieren:

Nachdem wir diese Option festgelegt haben, speichern wir eine Referenz auf die Treeroot und eine neue Textnode. Das Übergeben der Treeroot -Variablen an den TextNode -Konstruktor verbindet den Knoten mit dem Baum. Schließlich rufen wir die Render -Methode auf, um den Baum anzuzeigen. Hier ist die Anweisung, die sie nennt:

Dies ist die erste Anweisung unseres Code, die ausgeführt wird. Die OnDomready -Methode ruft BuildaJaxTree auf, wenn die HTML -Seite voll geladen ist. Das Ausführen unseres Skripts vor diesem Punkt würde Fehler einladen.

mehr Knoten mit AJAX -Aufrufen

Lassen Sie uns jetzt durch die Funktion makemorenoden gehen. Weitere Informationen finden Sie auf den Überblick über das zu Beginn dieses Artikels beschriebene Rückrufobjekt. Denken Sie daran, dass unser AJAX -Anruf (asyncrequest) ein Rückrufobjekt mit Erfolgs- und Misserfolgsmethoden benötigt, sodass er eine dieser Methoden nach der Mission zur Datenerfassung aufrufen kann. Der größte Teil des Codes in Makemorenodes erstellt dieses Callback -Objekt.

Hier ist das Rückrufobjekt, das wir verwenden werden. Vergleichen Sie es mit dem generischen Rückrufobjekt, das wir bei der Einführung von Asyncrequest gesehen haben:

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();}

Die Erfolgs- und Fehlereigenschaften beziehen sich auf die Methoden, die Asyncrequest aufruft, nachdem es unser serverseitiges Thesaurus-Skript abfragt. Wir werden die Funktion der FoundSyNonyms aufrufen, wenn es dem PHP -Skript gelingt, einige Synonyme oder den Condnosynonyme -Rückruf einzuziehen, wenn das PHP -Skript bei seiner Suche fehlschlägt. Beachten Sie, dass die Timeout -Eigenschaft in diesem Fehlerfall ein Faktor ist: AsyncRequest Flags Ein Fehler, wenn sie nicht innerhalb von sieben Sekunden (7.000 Millisekunden) aufgerufen wird. Denken Sie daran, dass die Argumenteigenschaft alle Daten enthält, die durch die von Asyncrequest bezeichneten Erfolgs- und Misserfolgsfunktionen benötigt werden. Für unser Beispiel speichern wir vor dem Ajax -Anruf den Knoten, der vom Benutzer im Argument geklickt hat. Die Erfolgsmethode benötigt diesen Knoten aus zwei Gründen. Erstens wird ein neuer Synonym -Subtree erstellt: Ein Stammknoten wird dafür benötigt, und der vom Benutzer geklickte Knoten wird dieses Root sein. Zweitens, um den Knoten mitzuteilen, dass wir mit ihm mit ihm fertig sind, über seine LOADComplete -Methode. Wenn wir diese Methode nicht abgefeuert haben, würde der Baum einfrieren, da einer seiner Knoten nicht weiß, wann das Hören auf die Mausklicks des Benutzers wieder aufgenommen werden soll. Auch wenn die Fehlermethode dem Baum keine Knoten hinzufügt, benötigt der Knoten, auf den der Benutzer geklickt hat

häufig gestellte Fragen (FAQs) zu Yui Treeview und Ajax

Was ist Yui Treeview und wie funktioniert es mit AJAX? Es ist Teil der YAHOO User Interface (YUI) -Bibliothek, die eine Reihe von Dienstprogrammen und Steuerelementen enthält, die in JavaScript geschrieben wurden, um reichlich interaktive Webanwendungen zu erstellen. Ajax hingegen steht für Asynchronous JavaScript und XML. Es handelt sich um eine Reihe von Webentwicklungstechniken, die viele Web-Technologien auf der Client-Seite verwenden, um asynchrone Webanwendungen zu erstellen. Wenn Yui Treeview mit AJAX kombiniert wird, ermöglicht es die Erstellung dynamischer, erweiterbarer Baumstrukturen, die Daten auf Bedarf laden und die Effizienz und Benutzererfahrung Ihrer Webanwendung verbessern können. Zunächst müssen Sie die Yui -Bibliothek in Ihr Projekt aufnehmen. Anschließend müssen Sie eine neue Instanz der TreeView -Klasse erstellen und die Struktur Ihres Baumes definieren. Danach können Sie AJAX verwenden, um Daten dynamisch in den Baum zu laden. Dies beinhaltet die Einrichtung einer AJAX -Anforderung zum Abholen von Daten vom Server und die Verwendung der Antwortdaten zum Erstellen neuer Knoten im Baum. Erstens ermöglicht es die Erstellung dynamischer, erweiterbarer Baumstrukturen, die Daten auf Bedarf laden können. Dies kann die Effizienz und Benutzererfahrung Ihrer Webanwendung erheblich verbessern. Zweitens bietet es ein hohes Maß an Anpassung, sodass Sie eine Baumstruktur erstellen können, die Ihren spezifischen Anforderungen entspricht. Schließlich ist es Teil der Yui-Bibliothek, ein gut dokumentierter und weit verbreiteter Satz von Tools für die Webentwicklung. Einige der beliebtesten sind JQuery Treeview, Jstree und FancyTree. Diese Tools bieten Yui TreeView ähnliche Funktionen, aber sie haben jeweils ihre eigenen einzigartigen Funktionen und Vorteile. Es ist jedoch wichtig zu beachten, dass Yui Treeview Teil der Yui -Bibliothek ist, die über seine eigenen Versorgungsunternehmen und -kontrollen verfügt. Daher müssen Sie möglicherweise zusätzliche Arbeiten ausführen, um sicherzustellen, dass Yui Treeview korrekt mit anderen Bibliotheken funktioniert.

Wie kann ich das Erscheinungsbild meines Yui Treeview anpassen? Die Yui -Bibliothek bietet eine Reihe von CSS -Klassen, mit denen Sie Ihren Baum stylen können. Sie können auch Ihre eigenen benutzerdefinierten CSS -Klassen erstellen, wenn Sie mehr Kontrolle über das Erscheinungsbild Ihres Baumes benötigen. Dies umfasst Daten aus Datenbanken, XML-Dateien, JSON-Dateien und mehr. Durch das Laden von Daten aus einem serverseitigen Skript können Sie eine dynamische Baumstruktur erstellen, die das Dateisystem auf Ihrem Server darstellt. Dieser Fehlerhandler kann alle Fehler aufnehmen, die während der Anforderung auftreten, und eine geeignete Nachricht an den Benutzer anzeigen. Die Yui -Bibliothek ist reaktionsschnell und funktioniert gut auf einer Vielzahl von Geräten, einschließlich Mobiltelefonen und Tablets. Möglicherweise müssen Sie jedoch einige Anpassungen vornehmen, um sicherzustellen, dass Ihre Baumstruktur auf einem kleinen Bildschirm leicht zu navigieren ist.

Das obige ist der detaillierte Inhalt vonBauen Sie einen Ajax -Baum mit Yui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!