Angular Tree Grid - Leistungsfähige Tree liste
- Laden Sie große Datenmengen, indem untergeordnete Daten bei Bedarf dynamisch geladen werden.
- Bietet flexible UI-Interaktionen wie Auf-/Zuklappen von Parent-Datensätzen, Dialogbearbeitung und mehr.
- Attraktive UI-Darstellung mit integrierten Themes wie Fabric, Bootstrap usw.
Quick Overview Video
Trusted by the world’s leading companies
Überblick
Die Angular TreeGrid ist eine funktionsreiche Komponente zur effektiven Visualisierung selbstreferenzieller, hierarchischer Daten in tabellarischer Form (baumartige Struktur). Das umfangreiche Funktionsangebot umfasst Datenbindung, Virtualisierung, Bearbeitung, Sortierung, Suche, Filterung, unendliches Scrollen, Paginierung, gefrorene Zeilen und Spalten, Export in verschiedene Formate, Zeilenaggregation und mehr.
Warum Syncfusion Essential Studio® Angular Tree Grid wählen?
Hohe Leistung
Hierarchische Datenanzeige: Das optimierte Design bietet hohe Performance und kann Millionen von Datensätzen laden – in nur wenigen Sekunden.
Nahtlose Datenbindung
Binden Sie Daten nahtlos an verschiedene lokale und entfernte Datenquellen wie JSON, OData, WCF und RESTful-Webservices mithilfe eines DataManagers.
Selbstreferenzielles, hierarchisches Grid
Das Angular TreeGrid wurde entwickelt, um selbstreferenzielle und hierarchische Daten tabellarisch darzustellen und die Beziehung zwischen Parent- und Child-Datensätzen sichtbar zu machen.
Flexible Bearbeitung
Das Angular Tree Grid unterstützt Create-, Read-, Update- und Delete-Operationen (CRUD) mit beobachtbaren Daten. Es kann sowohl mit JSON-Arrays als auch über entfernte Datenservices mittels DataManager bearbeiten.
Passt sich jeder Auflösung an
Das Tree Grid bietet ein hochgradig responsives Layout mit optimiertem Design für Desktop, Touchscreens und Smartphones. Es funktioniert zuverlässig auf Geräten mit iOS, Android oder Windows.
Eigene Template-Designs erstellen
Mit Templates können Anwender ein individuelles UI im Angular Tree Grid erstellen, das auf ihre Anwendung zugeschnitten ist. Es stehen zahlreiche Template-Optionen zur Verfügung.
Attraktive, anpassbare Themes
Modernes Design mit über fünf integrierten Themes wie Fluent, Tailwind CSS, Bootstrap, Material, Fabric und mehr. Nutzen Sie das online Theme Studio, um Themes des Angular Tree Grid einfach anzupassen.
Globalisierung und Lokalisierung
Ermöglicht Nutzern aus verschiedenen Regionen die Nutzung des Tree Grid durch Formatierung von Datum, Währung und Zahlen gemäß ihren Einstellungen.
Angular Tree Grid – Codebeispiel
Starten Sie schnell mit dem Angular Tree Grid (Tree Table) anhand weniger Zeilen HTML- und TS-Beispielcode, wie unten gezeigt. Erkunden Sie auch unser Angular Tree Grid-Beispiel, das zeigt, wie man ein Tree Grid in Angular rendert und konfiguriert.
<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='350' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90><e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
@Component({
selector: 'ej2-treegrid-container',
templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
public data: Object[] = [];
ngOnInit(): void {
this.data = sampleData;
}
}Skeleton-Ladeindikator
Das Tree Grid zeigt während des Ladens und Bindens der Daten einen Shimmer-Effekt. Die Komponente bietet zwei Arten von Ladeeffekten: Spinner und Shimmer.
Spalten
Spalten definieren das Schema einer Datenquelle im Angular Tree Grid. Zu den Features zählen Formatierung, Spaltendefinitionen, Textumbruch, Spaltenauswahl, Spaltenmenü, Spaltenreihenfolge und weitere wichtige Funktionen.
Paginierung
Über die Paginierung kann ein Abschnitt der Datenquelle angezeigt werden. Das Angular Tree Grid bietet eine eingebaute Pager-UI mit Anpassungsoptionen und unterstützt einen On-Demand-Paging-Modus für effiziente Abfragen entfernter Webservices.
Sortierung
Das Angular Tree Grid ermöglicht das Sortieren einer Spalte durch Klick auf die Kopfzeile. Mit Strg + Klick auf die Kopfzeile wird Mehrfachsortierung ausgeführt. Sortieren Sie Daten auf- oder absteigend.
Filterung
Filterung hilft, bestimmte oder zusammenhängende Datensätze anzuzeigen, die einem Kriterium entsprechen. Es werden verschiedene Filtertypen unterstützt, einschließlich mächtiger Excel-ähnlicher Filter. Nutzer können Filtertypen wählen, eigene Filterlogik definieren und die Filter-UI anpassen. Filterung kann auch in Verbindung mit Parent- oder Child-Datensätzen verwendet werden.
Auswahl
Das Angular Tree Grid ermöglicht die Auswahl von Zeilen oder Zellen. Eine oder mehrere Zeilen/Zellen können durch Halten von Strg/Command oder programmatisch ausgewählt werden.
Bearbeitung
Das Angular TreeGrid bietet vollständige Unterstützung für Create-, Read-, Update- und Delete-Operationen (CRUD). Neben integrierten Editor-Komponenten können Benutzer mit Templates eigene Editor-Komponenten erstellen. Die Bearbeitung kann mit einer JSON-Sammlung oder über entfernte Datenservices mithilfe des DataManagers erfolgen.
Drag & Drop von Zeilen
Das Angular TreeGrid ermöglicht Drag & Drop von Zeilen innerhalb desselben oder eines anderen Tree Grid. Diese Funktion ist nützlich, um Daten neu zu organisieren und die Benutzerführung zu verbessern.
Aggregation
Aggregationen von Spaltenwerten lassen sich mit der Aggregatfunktion anzeigen und für jede Hierarchieebene mit vordefinierten Summentypen anpassen.
Gefrorene Spalten
Gefrorene Spalten sind links, rechts oder beidseitig sichtbar und lassen den übrigen Grid-Inhalt scrollbar. Sie werden hauptsächlich zum Vergleichen von Zellwerten verwendet.
Suche
Sie können Datensätze über die Suchmethode finden. Integrieren Sie ein Suchfeld in die Toolbar des Angular TreeGrid, indem Sie Such-Items hinzufügen.
Benutzerdefinierte Tooltips
Die Angular TreeGrid-Komponente erlaubt das Setzen von Tooltips für TreeGrid-Zellen. Bewegen Sie den Mauszeiger über Baumknoten, um Tooltip-Text anzuzeigen.
Sticky Headers
Behalten Sie die Spaltenköpfe beim Scrollen durch Daten immer im Blick. Der sticky Header verbessert die Benutzerfreundlichkeit, indem er einen konstanten Kontext bietet und so das Interpretieren und Analysieren großer Datensätze erleichtert.
Export
Excel, PDF, CSV-Export
Exportieren Sie das Tree Grid in verschiedene Dateiformate wie Excel, PDF oder CSV. Benutzer können das exportierte Dokument zudem programmatisch anpassen.
Benutzer können Daten über die Druckoption in der Toolbar oder programmatisch drucken. Drucken Sie alle Zeilen eines Angular Tree Grid unabhängig von der Seitenanzahl oder nur die aktuell angezeigte Seite.
Zusätzliche Funktionen
Zeilenhöhe
Die Zeilenhöhe beeinflusst, wie viele Datensätze im Viewport sichtbar sind, und lässt sich mühelos an UI-Anforderungen anpassen. Es ist ebenfalls möglich, die Zeilenhöhe bedingt festzulegen.
Kopieren in die Zwischenablage
Die Zwischenablage ermöglicht das Kopieren ausgewählter Zeilen- oder Zellendaten. Verwenden Sie Strg+C bzw. Strg+Shift+H, um Daten mit bzw. ohne Kopfzeilen zu kopieren.
Kontextmenü
Das Kontextmenü verbessert Benutzeraktionen per Popup-Menü. Es erscheint beim Rechtsklick auf Zellen, Kopfzeilen oder Pager. Neben Standardeinträgen können benutzerdefinierte Menüpunkte hinzugefügt werden.
Breite und Höhe
Ändern Sie die Größe des Angular Tree Grid über die Breiten- und Höhen-Eigenschaften. Scrollleisten erscheinen bei Überlauf. Um das Tree Grid vollständig an den Parent-Container anzupassen, setzen Sie Höhe und Breite auf 100%.
Gestapelte Kopfzeilen
Gestapelte Kopfzeilen erlauben das Gruppieren und Visualisieren von Spaltenüberschriften in gestapelter Form. Es gibt keine Begrenzung für die Anzahl stapelbarer Spalten. Nutzer können alle TreeGrid-Aktionen auch bei gestapelten Spalten ausführen.
Zugänglichkeit
Tastaturnavigation
Das Tree Grid stellt sicher, dass jede Zelle per Tastatur zugänglich ist. Wichtige Funktionen wie Auf-/Zuklappen von Child-Zeilen, Sortieren, Auswählen und Bearbeiten lassen sich ausschließlich per Tastatur steuern; keine Maus ist erforderlich. Dies unterstützt die Erstellung barrierefreier Anwendungen.
Bildschirmleser
Das Angular Tree Grid bietet umfassenden WAI-ARIA-Support. Die UI enthält hochkontrastige visuelle Elemente, die sehbehinderten Nutzern eine bessere Darstellung ermöglichen. UI-Beschreibungen sind über Hilfstechnologien wie Bildschirmleser leicht zugänglich.
Von rechts nach links (RTL)
Right-to-Left-Rendering ermöglicht die Anzeige von Text und Layout des Tree Grid von rechts nach links und verbessert so die Nutzererfahrung für RTL-Sprachen.
Unterstützte Angular-Versionen
Das Angular Tree Grid wird kontinuierlich aktualisiert und ist mit Angular-Versionen ab 4 bis zur aktuellen Version kompatibel.
Andere unterstützte Frameworks
Das Tree Grid ist ebenfalls für Blazor, React, JavaScript und Vue verfügbar. Entdecken Sie die plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Das Angular Tree Grid funktioniert in allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.
Nicht sicher, wie Sie Ihr erstes Angular Tree Grid erstellen? Tutorials und Dokumentation helfen weiter.
Ich möchte es mir jetzt ansehen Ich möchte jetzt lesen150+ Angular-UI-Komponenten
ALLE KOMPONENTEN
INTELLIGENTE KOMPONENTEN
GITTER
DATENVISUALISIERUNG
Dropdown-Menüs
DATEI-ANSICHTEN & BEARBEITER
TASTEN
INTERAKTIVER CHAT
EINGABEN
NAVIGATION
Formulare
BENACHRICHTIGUNG
Häufig gestellte Fragen
Warum sollten Sie Syncfusion Essential Studio® Angular Tree Grid wählen?
Laden Sie große Datenmengen, indem Sie untergeordnete Daten bei Bedarf dynamisch laden (Virtualisierung).
Beinhaltet flexible UI-Interaktionen wie Auf-/Zuklappen von Parent-Datensätzen, Dialogbearbeitung und mehr.
Flexible Datenbindung mit Unterstützung für lokale und entfernte Datenquellen wie JSON, RESTful-Services und OData.
- Eines der besten Angular Tree Grids auf dem Markt mit funktionsreicher UI.
- Attraktive UI-Darstellung mit integrierten Themes wie Fabric, Bootstrap usw.
- Einfache Konfiguration und API.
- Unterstützt alle modernen Browser.
- Mobil- und Touch-freundlich sowie responsive.
Umfangreiche Lernressourcen wie Demos, Dokumentation und Videos.
Wo finde ich die Angular Tree Grid-Demo?
Sie finden unsere Angular Tree Grid-Demo, die zeigt, wie das TreeGrid gerendert und konfiguriert wird.
Kann ich Syncfusion Angular Tree Grid kostenlos nutzen?
Nein, es handelt sich um ein kommerzielles Produkt und eine kostenpflichtige Lizenz ist erforderlich. Es steht jedoch eine kostenfreie Community-Lizenz für Unternehmen und Einzelpersonen mit weniger als 1 Mio. USD Jahresumsatz und bis zu fünf Entwicklern zur Verfügung.
Wie beginne ich mit Syncfusion Angular Tree Grid?
Ein guter Einstiegspunkt ist unsere umfassende Getting-Started-Dokumentation.
Unsere Kunden lieben uns
Mit einem ausgezeichneten Toolset und einem großartigen Supportteam verkürzt Syncfusion® die Entwicklungszeit der Kunden.Hier sind einige ihrer Erfahrungen.
An amazing toolset to accelerate UI development
The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.
Shrikant P
Customer Success Manager
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V
CEO
Echte Erfolgsgeschichten ansehen
Entwickler auf der ganzen Welt vertrauen auf Syncfusions Essential Studio, um komplexe Projekte zu vereinfachen und die Auslieferung zu beschleunigen. Mit einer umfangreichen Bibliothek an UI-Steuerelementen, leistungsstarken SDKs und zuverlässigem Support hilft Essential Studio Teams, unternehmensreife Anwendungen mit Zuversicht zu erstellen.
Fallstudien erkundenIndustrie
Softwareentwicklung
75% Kostenreduzierung
50% Schnellere Entwicklung
Industrie
Versorgungsunternehmen (Öl und Gas)
450+ Stunden eingespart
Gestraffte Prozesse und Entwicklungsaufwand in Stunden reduziert.
Fortschrittliche, flexible Funktionen
Benutzer durch robuste und vielseitige Funktionalität befähigt.
Industrie
Software und Technologie
1000+ Stunden eingespart
Beschleunigte Entwicklung mit unternehmensreifen UI-Komponenten.
Effizientes Dateimanagement
Vereinfachte Workflows mit Dokumentbibliotheken, ohne sie von Grund auf neu zu erstellen.
Industrie
Software und Technologie
2 Jahre Verzögerung vermieden
Zwei Jahre Verzögerungen durch proaktive Planung verhindert.
Termingerechte Lieferung
Projekte termingerecht mit zuverlässigen Steuerelementen geliefert.
Industrie
IT-Dienstleistungen und IT-Beratung
Verbesserte Leistung
Große Datensätze werden mit einfacher Anpassung und schnellem Debugging verarbeitet.
Hochgradig anpassbar
Plug-and-Play-Steuerelemente mit schneller Vorlagenintegration.
Industrie
Professionelle Dienstleistungen
Sofortiger Zugriff
Schnelle Verfügbarkeit von Funktionen und Ressourcen.
Reduzierte Abhängigkeiten
Weniger Abhängigkeiten für eine schnellere Entwicklung.
Von Benutzern auf der ganzen Welt bewertet
Syncfusion Angular Tree Grid Ressourcen
UI-Kits
Figma-Download
Figma-Download
Auszeichnungen
Viele behaupten, dass sie herausragend sind. Doch wenn andere das erkennen und loben, bedeutet es viel mehr. Syncfusion® präsentiert mit Stolz folgende Branchenauszeichnungen.
