Javascript Baum-Visualisierung

[BeBur]

Ich habe hier (Datenbank / Backend) Daten, die als Baumstruktur vorliegen und die will ich im Browser darstellen und bearbeiten.
Was ich brauche:

• Drag and Drop + zugehörige Events um die Änderung ans Backend weiter zu geben
• Der Baum hat eine fixe Hierarchie mit 4 bzw. 5 Ebenen (Die 5. Ebene wird voraussichtlich nur aggregiert angezeigt und nicht als seperate Ebene)
• Aktuell habe ich bei den 4 Ebenen knapp 7.000 Elemente die ich da einpflege
• Ich will keine Animationen oder sich selber organisierende Graphen, sondern ein fixes Layout
• Nice to have: Eine Suche bzw. live-filter und vllt noch tri-state Checkboxen

Ich habe erst eine Liste mit Graphen Libraries abgegrast. Da scheint mir aber nur D3 geeignet und das ist mir zu low-level. Habe dann konkreter nach Tree Views gesucht und habe Treant, Nestable und jsTree gefunden.
Die ersten beiden scheinen zu wenige Funktionen zu haben (Treant scheint kein drag and drop zu haben). jsTree scheint mir genau das zu sein, was ich suche. jQuery ist auch sowieso schon eingebunden, das wäre also keine zusätzliche Abhängigkeit.

Gibt es denn wirklich nichts anderes? jQuery ist doch schon etwas veraltet. Ist jsTree die einzige feature-rich tree view? Anscheinend benutzen alle D3, sind mir da evtl. sehr gut passende fertige Templates entgangen?

 

[cc_aero]

Ich hatte da auch schon lange für ein Projekt gesucht und bin Schlussendlich auch nur auf jstree als einzig wirklich brauchbare Möglichkeit gestoßen.
Funktioniert aber letzt endlich sehr gut mit insgesamt sicher um die 50.000 Elemente (werden aber dynamisch geladen).

 

[Bagbag]

Du könntest mit Angular eine Web Component bauen und Angular Material Tree nutzen.

 

[BeBur]

Du könntest mit Angular eine Web Component bauen und Angular Material Tree nutzen.

Ja, das ergibt viel Sinn und ist sicher auch der Grund warum es wenig reine JS Libs gibt. Wer komplexere Komponenten benötigt, der baut die sich in der Regel mit Angular o.ä.. Ich glaube für mich gerade der wirklich nur genau eine Tree View haben will (Projekt ist in RoR realisiert) ist das ein bisschen overkill, so gerne ich mal ein wenig mit Angular arbeiten würde . Ich denke ich sehe es mal als Glücksfall, dass es überhaupt ein entsprechendes feature-rich Projekt mit meinen Anforderungen gibt das nicht auf so ein Framework aufbaut.

 

[Bagbag]

Naja, du sollst ja mit Angular auch nur die Tree View machen und nicht die ganze Applikation. Eine Web Component machen. Genau dafür gibt es das Konzept.

 

[BeBur]

Ja, schon klar. Trotzdem bringt mich das erstmal zu einem ganz neuen/anderen Techstack (Angular CLI, NPM, NodeJS, Typescript) und das ist relativ viel overhead dafür, dass es mit jsTree bereits eine fertige Web Component gibt.