Dynamische Baum-Struktur mit interaktiver Suche

Dieser Artikel zeigt, wie sich ein Baum, z.B. ein Verzeichnisbaum wie man ihn aus dem Explorer kennt, mittels Vue.js darstellen lässt. Das ganze versehen wir dann noch mit einer interaktiven Suchen, die die Elemente des Baumes durchsucht und filtert. Fertig sieht es dann so aus:

Dynamik dank Vue.js

Vue.js ist ein modernes JavaScript-Framework, mit dem sich dynamische Webanwendungen einfach und schnell erstellen lässt. Es ist ideal für neue Web-Projekte, z.B. wenn man eine moderne Plattform für Kryptowährungen wie Beispielsweise bitcoinsystem.app/de erstellt. Vue.js ist aber auch perfekt für bestehende Web-Projekte die ggf. noch auf reiner HTML- und PHP-Basis erstellt wurden. Einzelne Komponenten können in solchen Webanwendungen mit relativ wenig Aufwand dynamisch gemacht werden, um so einen höheren Komfort für eure Besucher zu bieten.

Dieser Artikel verwendet etwas weiterführende Konzepte von Vue.js. Für eine allgemeine Einführung in Vue.js empfehle ich: Vue.js Introduction

 

Rekursiver Baum inklusive Suche

Vorab der vollständige Code für die obige Demo:

Rekursive Darstellung des Baums

Als erstes definieren wir einen rekursiven Baum. Rekursion bedeutet in diesem Fall, dass jedes Element weitere Knoten (nodes) enthalten kann, die die entsprechenden Kind-Elemente sind.

Hier hat z.B. das Eltern-Element zu Pflanzen ein Kind-Element Bäume. Bäume hat wiederum drei Kinder: Kiefer, Fichte, und Tanne. Dies kann beliebig tief verwurzelt sein.

Neben den Namen und den Kind-Elementen (nodes), speichern wir ebenfalls Status-Flags (True/False) dazu ob ein Eintrag angezeigt werden soll (shown) und ob der Eintrag geöffnet oder geschlossen ist (open).

Da wir eine beliebig tiefen Baum haben können, ist die einfache Darstellung per Schleife nicht möglich. Stattdessen müssen wir auf rekursive Programmierung zurück greifen, um die Darstellung und gewisse Methoden umzusetzen.

Für die Darstellung des Baums nutzen müssen wir zuerst eine neue Componente definieren:

Diese Komponente zeigt den Knoten an (node.name) und sofern node.open true ist, wird die Komponente tree-menu erneut aufgerufen um die Kinder-Elemente anzuzeigen.

Das ganze haben wir dann noch mit ein wenig Logik verstehen zur Steuerung des Pfeils, so dass dieser nur angezeigt wird falls Kinder vorhanden sind und für dieser dreht sich entsprechend, je nach Wert von node.open.

Um mehr über rekursive Komponenten in Vue.js zu erfahren, empfehle ich: Build A Collapsible Tree Menu With Vue.js Recursive Components und Recursive Components.

 

Interaktive Suche

Wie in dem Video oben gezeigt, ist noch eine Suchfunktion vorhanden die alle Elemente des Baums durchsuchen und nur entsprechende Übereinstimmungen anzeigt.

Um dies zu erzielen, definieren wir zuerst einen watch der die Query-Variable überwacht:

Sobald der Wert sich ändert, wird die Methode applyFilter aufgerufen.

Die Such-Logik sieht wie folgt aus:

Die Methode applyFilter prüft, ob etwas in die Suche eingegeben wurde. Falls diese Leer ist, setzt sie den Baum zurück indem alle Element auf shown=true gesetzt werden.

Sofern ein Such-Query vorhanden ist, wird die Methode  this.containsText(child, query); auf jedes Hauptelement des Baums angewendet.

Diese Methode prüft, ob der Suchstring zum Namen des Eltern-Knoten passt (parent_match). Ebenfalls überprüft es, ob es zu einem der Kinder passt. child_match ist true, falls die Methode containsText für eins der Kinder true ist. Hier wird die angesprochene Rekursion verwendet. Sofern eins der Kind zu dem Suchstring passt, wird open auf true gesetzt damit der Treffer im Baum direkt angezeigt wird.

Sofern der Eltern-Knoten zum Suchstring passt, setzen wir alle Kinder-Elemente noch auf sichtbar (this.showAll(node)). So lassen sich alle Kinder-Elemente sehen, wenn der Such-String zum Eltern-Knoten passt. Ansonsten wären sie ausgeblendet und der Nutzer könnte sie nicht öffnen.

Autor:
Zurück zur Übersicht aller Beiträge