JS TreeView

Eine einfache Möglichkeit, hierarchische Daten auszugeben und nach Ihren Wünschen zu gestalten.

Ein elegantes und reaktionsschnelles TreeView Control

Diese Bibliothek ist vollgepackt mit verschiedenen Erscheinungsausgaben und einem umfangreichen Ereignis-Set und reicht aus, um den perfekten Baum in JavaScript zu erstellen.

Tree Knoten

Jeder Baum kann unbegrenzte Ebenen von Knoten enthalten und jeder Knoten - unbegrenzte Anzahl von Unterknoten. Die Größe und das Image jedes Knotens werden angepasst. Knoten können Tooltips darstellen und Drag&Drop akzeptieren. Daten für Baumknoten können über Vorlagen oder Datenobjekte eingestellt werden.

Online Beispiel: Eine Projektmanagement-Anwendung
API Übersicht: TreeNode

Interaktion

Benutzer können eine Vielzahl von Aktionen in einer Strukturansicht durchführen und Sie können festlegen, welche von ihnen erlaubt sind. Baumknoten können per Drag & Drop verschoben und mehrere Knoten gleichzeitig ausgewählt werden. Um die Performance zu steigern, können Artikel bei Bedarf geladen werden.

Online Beispiel: Interaktiver Baum
Tutorial: Dynamische Baumansicht mit Kontextmenü

JavaScript TreeView: Benutzer Interaktion

Erscheinungsform

Die Baumgröße kann geändert werden und die Baumausrichtung kann horizontal oder vertikal erfolgen. Eine Reihe von Eigenschaften ermöglicht es Ihnen, die genaue Position des Baums auf der Seite festzulegen.

Online Beispiel: Baum mit Ikonen

Styling und Themen

Der Baum wendet CSS-Styling auf die Designs an, die von allen MindFUsion UI-Controls gemeinsam verwendet werden. Sie können die vordefinierten Themes bearbeiten oder eigene erstellen. Es gibt auch eine spezielle cssClass-Eigenschaft, mit der Sie der TreeView eine benutzerdefinierte CSS-Klasse zuweisen können, deren Styling-Einstellungen Vorrang vor dem Design haben.

Online Beispiel: TreeView mit Earth Thema

Methoden

Eine Reihe nützlicher Methoden werden durch das TreeView-Control zur Verfügung gestellt. Sie ermöglichen den Zugriff auf programmgesteuerte Elemente, das Laden der Baumdaten aus Objekten oder Json-Strings, das Auswählen und Abwählen von Elementen.

Online Beispiel: Weltsternwarten
API-Referenz: TreeView und TreeNode

Ereignisse

Das TreeView-Control löst verschiedene Ereignisse aus, um Sie über jede Aktion zu informieren, die der Benutzer am Baum und seinen Elementen durchführt oder durchgeführt hat. Dazu gehören das Ziehen und Ablegen von Elementen, die Mausbewegung, die Auswahl von Elementen sowie das Klicken auf Knoten. Sie können einige der Aktionen abbrechen.

Online Beispiel: Dom-Inspektor mit TreeView
Online-Dokumentation: Die TreeView-Klasse