JavaScript Tree Grid - HTML5 Tree‑Tabelle mit hoher Leistung
- 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.
Trusted by the world’s leading companies
Überblick
Das JavaScript 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® JavaScript 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 JavaScript TreeGrid ist dafür konzipiert, selbstreferenzielle und hierarchische Daten tabellarisch darzustellen und so die Beziehung zwischen Parent- und Child-Datensätzen sichtbar zu machen.
Flexible Bearbeitung
Das JavaScript TreeGrid 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 TreeGrid 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 JavaScript TreeGrid 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 TreeGrid einfach anzupassen.
Globalisierung und Lokalisierung
Ermöglicht Nutzern aus verschiedenen Regionen die Nutzung des TreeGrid durch Formatierung von Datum, Währung und Zahlen gemäß ihren Einstellungen.
JavaScript TreeGrid – Codebeispiel
Starten Sie schnell mit dem JavaScript TreeGrid anhand weniger Zeilen HTML- und TS-Beispielcode, wie unten gezeigt. Erkunden Sie auch unser JavaScript TreeGrid-Beispiel, das zeigt, wie man ein TreeGrid in JavaScript rendert und konfiguriert.
<div class="control-section">
<div class="content-wrapper">
<div id="TreeGrid">
</div>
</div>
</div>import { TreeGrid, Page } from '@syncfusion/ej2-treegrid';
import { sampleData } from './data-source';
/**
* Default TreeGrid sample
*/
TreeGrid.Inject(Page);
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
height: 350,
treeColumnIndex: 1,
allowPaging: true,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'endDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },
{ field: 'priority', headerText: 'Priority', width: 90 }
]
});
treegrid.appendTo('#TreeGrid');
Skeleton Ladeindikator
Das TreeGrid zeigt während des Ladens und Bindens der Daten einen Shimmer-Effekt. Die Komponente bietet zwei Arten von Ladeeffekten: Spinner und Shimmer.
Adaptives UI Layout
Die Benutzeroberfläche des JavaScript TreeGrid ist für eine bessere Darstellung und Bedienbarkeit auf kleinen Bildschirmen angepasst. Filter-, Such- und Bearbeitungsdialoge passen sich an die Bildschirmgröße an.
Spalten
Spalten definieren das Schema einer Datenquelle im JavaScript TreeGrid. 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 JavaScript TreeGrid bietet eine eingebaute Pager-UI mit Anpassungsoptionen und unterstützt einen On-Demand-Paging-Modus für effiziente Abfragen entfernter Webservices.
Sortierung
Das JavaScript TreeGrid 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 TreeGrid 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.
Zeilen
Zeilen im TreeGrid repräsentieren die Datensatzinformationen aus der Datenquelle. Es werden Funktionen wie Auf- und Zuklappen von Child-Zeilen, Zeilenreihenfolge ändern, Einrücken/Ausrücken zur Anpassung von Hierarchieebenen und vieles mehr unterstützt.
Bearbeitung
Das JavaScript 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 JavaScript TreeGrid ermöglicht Drag & Drop von Zeilen innerhalb desselben oder eines anderen TreeGrid. 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 Zusammenfassungstypen 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 TreeGrid, indem Sie Such-Items hinzufügen.
Benutzerdefinierte Tooltips
Die Komponente erlaubt das Setzen von Tooltips für TreeGrid-Zellen. Bewegen Sie den Mauszeiger über Tree-Knoten, um Tooltip-Text anzuzeigen.
Export
Excel, PDF, CSV-Export
Exportieren Sie das TreeGrid 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 JavaScript TreeGrid 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 JavaScript TreeGrid über die Breiten- und Höhen-Eigenschaften. Scrollleisten erscheinen bei Überlauf. Um das TreeGrid 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 TreeGrid stellt sicher, dass jede Zelle per Tastatur zugänglich ist. Wichtige Funktionen wie Auf- und 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 JavaScript TreeGrid bietet umfassenden WAI-ARIA-Support. Die UI enthält hochkontrastige visielen 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 TreeGrid von rechts nach links und verbessert so die Nutzererfahrung für RTL-Sprachen.
Andere unterstützte Frameworks
Das TreeGrid ist ebenfalls für Blazor, React, Angular und Vue verfügbar. Entdecken Sie die plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Das JavaScript TreeGrid funktioniert in allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.
Nicht sicher, wie Sie Ihr erstes JavaScript TreeGrid erstellen? Unsere Dokumentation hilft weiter.
Ich möchte jetzt lesenÜber 155+ JavaScript UI-Steuerelemente
ALLE STEUERUNGEN
SMARTE KOMPONENTEN
RASTER
DROPDOWN-MENÜS
EINGABEN
DATENVISUALISIERUNG
NAVIGATION
SCHALTFLÄCHEN
INTERAKTIVER CHAT
BENACHRICHTIGUNG
FORMULARE
Häufig gestellte Fragen
Warum sollten Sie Syncfusion Essential Studio® JavaScript TreeGrid wählen?
Das JavaScript TreeGrid mit seinem umfangreichen Funktionsumfang bietet Folgendes:
Laden Sie große Datenmengen, indem Sie untergeordnete Daten bei Bedarf dynamisch laden (Virtualisierung).
Beinhaltet flexible UI-Interaktionen wie Auf- und Zuklappen von Parent-Datensätzen, Dialogbearbeitung und mehr.
Flexible Datenbindung mit Unterstützung für lokale und entfernte Datenquellen wie JSON, RESTful-Services, OData und WCF.
- Eines der besten JavaScript TreeGrid 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 und Dokumentation, um schnell loszulegen.
Wo finde ich die JavaScript TreeGrid-Demo?
Sie finden unsere JavaScript TreeGrid-Demo, die zeigt, wie das TreeGrid gerendert und konfiguriert wird.
Kann ich das Syncfusion JavaScript TreeGrid 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 dem Syncfusion JavaScript TreeGrid?
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.
Light and fast
I like JS controls the most, they are simple to use and easy to integrate to JS apps. In ASP.NET MVC your controls behave very nice, although I consider I have more control by using the JS version
Alexis A,
Software Architect
Syncfusion - Great controls and terrific support
The best in Syncfusion is the attention and efforts spent by the technical support whenever needed. It’s priceless. The Syncfusion controls are really usefull to accelerate my projects, mainly those things related to UI.
David B,
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 JavaScript TreeGrid 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.
