JavaScript Data Grid – Leistungsstark & vielseitig
- Lädt Millionen Datensätze blitzschnell.
- Mobilfreundliches Design für alle Geräte.
- Flexible Bearbeitung & Excel-ähnliche Filter.
- Nahtloser Export in PDF, CSV und Excel.
Quick Overview Video
Trusted by the world’s leading companies
Übersicht
JavaScript Data Grid, auch bekannt als JavaScript DataGrid, ist eine funktionsreiche Steuerung zur Anzeige von Daten in tabellarischer Form. Die breite Palette an Funktionen umfasst Datenbindung, Bearbeitung, Excel-ähnliches Filtern, benutzerdefiniertes Sortieren, Zeilenaggregation, Auswahl und Unterstützung für Excel-, CSV- und PDF-Formate.
Warum Syncfusion JavaScript DataGrid wählen?
Hohe Leistung
Durchdachte Bemühungen mit Fokus auf leistungsstarke Performance, um Millionen von Datensätzen in nur einer Sekunde zu laden.
Nahtlose datenbindung
Binden Sie Daten nahtlos aus verschiedenen lokalen und entfernten Datenquellen wie JSON, OData, WCF und RESTful-Webdiensten mit Hilfe des Data Managers ein.
Passt sich jeder auflösung an
DataGrid verfügt über ein hochgradig responsives Layout und ein optimiertes Design für Desktops, Touchscreens und Smartphones. Es funktioniert gut auf allen Mobiltelefonen mit iOS-, Android- oder Windows-Betriebssystem.
Flexible bearbeitung
Das JavaScript Grid führt erstellen-, lese-, aktualisierungs- und löschvorgänge (CRUD) einfacher mit einer Liste von Geschäftsobjekten oder einem entfernten Datendienst mithilfe des Data Managers aus.
Erstellen sie Ihre eigenen vorlagendesigns
Ermöglicht Benutzern, benutzerdefinierte Benutzererlebnisse im JavaScript Grid basierend auf ihren Anwendungsanforderungen mit einer großen Auswahl an Vorlagenoptionen zu erstellen.
Attraktive anpassbare Themen
Fortschrittliches Design mit über 5 integrierten Themes wie Fluent, Tailwind CSS, Bootstrap, Material, Fabric und mehr. Verwenden Sie das Online-Theme Studio-Tool, um Themes einfach anzupassen.
Einfaches exportieren und drucken
Exportieren sie das Data Grid in verschiedenen Dateiformaten, einschließlich Excel, PDF und CSV. Drucken Sie alle Zeilen, unabhängig von der Seitenanzahl, sowie die aktuell angezeigte Seite.
Globalisierung und lokalisierung
Ermöglicht Benutzern aus verschiedenen Regionen sie zu verwenden, indem Datumsangaben, Währungen und Zahlen entsprechend den Präferenzen formatiert werden.
JavaScript DataGrid Code-Beispiel
Beginnen Sie ganz einfach mit dem JavaScript DataGrid mit nur wenigen Zeilen HTML- und TS-Code, wie unten gezeigt. Entdecken Sie auch unser JavaScript DataGrid-Beispiel, das zeigt, wie man ein DataGrid in JavaScript rendert und konfiguriert.
<div class="control-section">
<div class="content-wrapper">
<div id="Grid">
</div>
</div>
</div>import { loadCultureFiles } from '../common/culture-loader';
import { Grid, Selection } from '@syncfusion/ej2-grids';
import { Query, DataManager } from '@syncfusion/ej2-data';
import { orderData } from './data-source';
Grid.Inject(Selection);
/**
* Default Grid sample
*/
loadCultureFiles();
let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(15));
let grid: Grid = new Grid(
{
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
{ field: 'CustomerName', headerText: 'Customer Name', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
{ field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
]
});
grid.appendTo('#Grid');
Skelett-ladeanzeige
Das Data Grid zeigt den Shimmer-Effekt als Ladeanzeige beim Abrufen von Daten und deren Bindung an das Grid während der ersten Darstellung, beim Aktualisieren oder nach Aktionen wie Sortieren, Filtern, Gruppieren und mehr. Das Data Grid bietet zwei Arten von Ladeanzeigeeffekten: Spinner und Shimmer.
Adaptives UI-Layout
Die Benutzeroberfläche des Data Grid ist für eine optimale Darstellung und Benutzerfreundlichkeit auf kleinen Bildschirmen angepasst und neu gestaltet. Zu den Funktionen gehören Filter, Sortierung, Suche, Spaltenauswahl, Spaltenmenü, Seitenumbruch-Dropdown und Bearbeitungsdialoge, die sich an die Bildschirmgröße anpassen und Zeilenelemente vertikal darstellen.
Spalte
Spalten definieren das Schema der Datenquelle im JavaScript DataGrid. Es unterstützt Formatierung, automatisches Generieren von Spalten, Spaltendefinitionen, Einfrieren von Zeilen und Spalten, Spaltenüberspannung, Textumbruch, Spaltenauswahl, Spaltenmenü und weitere Funktionen.
Seitennummerierung
Die Seitennummerierung wird verwendet, um einen Ausschnitt der Daten aus der zugewiesenen Datenquelle anzuzeigen. Das JavaScript DataGrid bietet eine integrierte Pager-Benutzeroberfläche mit Optionen zur vollständigen Anpassung. Es verfügt außerdem über einen On-Demand-Paging-Modus für eine effektive Datenabfrage von entfernten Webdiensten.
Sortierung
Sortieren Sie Zeilen entweder in aufsteigender oder absteigender Reihenfolge anhand einer Spalte durch einfaches Klicken auf die Kopfzeile. Sortieren Sie Daten aus mehreren Spalten, indem Sie die Strg-Taste gedrückt halten und auf die Kopfzeile klicken. Zusätzlich können Sie Ihre eigene benutzerdefinierte Sortierlogik basierend auf den Anforderungen der Anwendung definieren.
Filterung
Die Filterung hilft dabei, bestimmte oder verwandte Datensätze anzuzeigen, die einem bestimmten Kriterium im Datenraster entsprechen. Das JavaScript DataGrid unterstützt verschiedene Filtertypen, einschließlich leistungsstarker Excel-ähnlicher Filter. Wählen Sie den passenden Filtertyp, definieren Sie Ihre eigene benutzerdefinierte Filterlogik und passen Sie die Filter-Benutzeroberfläche an die Anforderungen der Anwendung an. Auch diakritische Zeichen können gefiltert werden.
Auswahl
Wählen Sie Zeilen oder Zellen entweder mit einem Kontrollkästchen oder durch einfaches Anklicken aus. Wählen Sie mehrere Zeilen oder Zellen aus, indem Sie die Strg-, Umschalt- oder Befehlstaste gedrückt halten oder dies programmatisch tun.
Bearbeitung
Das JavaScript DataGrid unterstützt Erstellungs-, Lese-, Aktualisierungs- und Löschvorgänge (CRUD). Zusätzlich zu den integrierten Editor-Komponenten zur Bearbeitung eines bestimmten Spaltenwerts können benutzerdefinierte Editor-Komponenten mithilfe von Vorlagen entsprechend den Anforderungen der Anwendung erstellt werden. Mit Hilfe eines Datenmanagers können Bearbeitungsvorgänge mit einer JavaScript-Array-Sammlung oder einem entfernten Datendienst durchgeführt werden.
Gruppierung
Gruppieren Sie Zeilen, um die Daten in einer organisierten hierarchischen Struktur in aufsteigender oder absteigender Reihenfolge darzustellen und so das einfache Erweitern und Reduzieren von Datensätzen zu ermöglichen. Es gibt eine Option, Datensätze einer gewünschten Spalte durch einfaches Drag-and-Drop dieser Spalte in einen interaktiven Ablagebereich zu gruppieren.
Aggregation
Aggregierte Werte für Spalten können mithilfe der Aggregatfunktion einfach angezeigt werden. Aggregate können so angepasst werden, dass ihre Werte in einzelnen Zusammenfassungszeilen, gruppenspezifischen Zusammenfassungszeilen oder Gruppenüberschriften angezeigt werden.
Eingefrorene Zeilen und Spalten
Gefrorene Zeilen und Spalten sind oben sowie links, rechts, beidseitig oder an einer festen Position sichtbar, wodurch der restliche Rasterinhalt scrollbar bleibt. Diese Funktion wird hauptsächlich verwendet, um Zellwerte in der JavaScript DataGrid-Komponente zu vergleichen.
Fixierter Kopfbereich
Die Kopfzeile des JavaScript DataGrid muss beim vertikalen Scrollen des Dokuments in einer festen Position bleiben, um den Rasterinhalt zusammen mit der Spaltenüberschrift sichtbar zu machen.
Zeilen ziehen und ablegen
Das JavaScript Grid ermöglicht es Benutzern, Zeilen per Drag-and-Drop in ein anderes DataGrid oder eine benutzerdefinierte Komponente zu verschieben. Benutzer können auch Zeilen innerhalb desselben DataGrid mithilfe des Drag-Symbols verschieben und Zeilen zwischen verschiedenen Gruppen übertragen.
Master-Detail-Grid
Das JavaScript Master Detail Grid ist ein Anwendungsfall, bei dem die Details eines Datensatzes durch Klicken auf eine bestimmte Zeile in einem separaten DataGrid angezeigt werden.
Zustandsverwaltung
Die Zustandsverwaltung in der JavaScript DataGrid-Komponente ermöglicht es, den Zustand des Rasters auch nach einem Browser-Refresh oder beim Navigieren zu einer anderen Seite innerhalb derselben Browser-Sitzung beizubehalten. Diese Funktion ist besonders nützlich, um die Konfiguration und Daten des Rasters nach einem Neuladen der Seite zu erhalten.
Live-Aktualisierung
Das DataGrid aktualisiert Live-Daten in seinen Zellen in bestimmten Zeitintervallen. Diese Aktualisierungen erfolgen ohne Verzögerung oder Verlangsamung, wodurch das System äußerst reaktionsschnell und effizient bleibt.
Integrierte Diagramme mit DataGrid
Die Data Grid-Komponente integriert sich mit dem Charts-Modul und verwandelt die ausgewählten Tabellendaten in dynamische, interaktive Visualisierungen. Diese Kombination aus Tabellen und Diagrammen ermöglicht es den Nutzern, auf einen Blick klarere Einblicke zu gewinnen. Die Nutzer können Diagrammtypen, Achsen und visuelle Darstellungen individuell anpassen.
Zusätzliche Funktionen
Zeilenhöhe
Die Zeilenhöhe ist ein wichtiger Faktor bei der Anzeige der Anzahl von Datensätzen im Ansichtsbereich und kann leicht an die UI-Anforderungen der Anwendung angepasst werden. Es ist auch möglich, die Zeilenhöhe bedingt festzulegen.
In die Zwischenablage kopieren
Die Zwischenablage ermöglicht es Benutzern, ausgewählte Zeilen- oder Zelleninhalte zu kopieren. Verwenden Sie die Tastenkombinationen Strg+C und Strg+Umschalt+H, um Daten mit bzw. ohne Kopfzeilen zu kopieren.
Kontextmenü
Führt verschiedene Aktionen im JavaScript DataGrid über das Popup-Menü aus, das erscheint, wenn auf eine Zelle, Kopfzeile oder den Pager mit der rechten Maustaste geklickt wird. Zusätzlich zu den integrierten Standardmenüeinträgen können benutzerdefinierte Kontextmenüeinträge hinzugefügt werden.
Breite und Höhe
Legen Sie die Eigenschaften für Breite und Höhe fest, um die Größe des DataGrid zu ändern. Wenn der Inhalt das Rasterelement überschreitet, erscheinen horizontale und vertikale Scrollleisten. Um das übergeordnete Container-Element des DataGrid vollständig auszufüllen, setzen Sie einfach Höhe und Breite auf 100 %.
Gestapelte Kopfzeilen
Gestapelte Kopfzeilen ermöglichen die Gruppierung und Visualisierung von Spaltenüberschriften in gestapelter Form. Die Anzahl der stapelbaren Spalten ist unbegrenzt. Alle DataGrid-Aktionen können auch bei gestapelten Spalten ausgeführt werden.
Barrierefreiheit
Tastaturnavigation
Die JavaScript DataGrid-Komponente stellt sicher, dass jede Zelle über die Tastatur zugänglich ist. Wichtige Funktionen wie Sortieren, Auswählen und Bearbeiten können ausschließlich über Tastaturbefehle ausgeführt werden; eine Mausinteraktion ist nicht erforderlich. Dies trägt zur Entwicklung hochgradig barrierefreier Anwendungen mit dieser Komponente bei.
Screenreader
Die JavaScript DataGrid-Ansicht bietet vollständige WAI-ARIA-Barrierefreiheitsunterstützung. Die Benutzeroberfläche des DataGrid enthält kontrastreiche visuelle Elemente, die sehbehinderten Personen ein optimales Seherlebnis ermöglichen. Außerdem sind gültige UI-Beschreibungen über unterstützende Technologien wie Screenreader leicht zugänglich.
Rechts-nach-Links (RTL)
Die Rechts-nach-Links-Darstellung ermöglicht die Anzeige von Text und Layout des JS DataGrid von rechts nach links. Dies verbessert die Benutzererfahrung und Barrierefreiheit für RTL-Sprachen.
Für Mobilgeräte optimiert und benutzerfreundlich für Touch
Die DataGrid-Komponente verbessert die Benutzerfreundlichkeit und bietet ein optimiertes, responsives Design für Desktops, Touchscreens und Smartphones auf allen Betriebssystemen, einschließlich iOS, Android und Windows.
Touch-Unterstützung
Benutzerfreundliche Touch-Gesten und ein interaktives UI-Design bieten das beste Benutzererlebnis. Alle HTML5 DataGrid-Funktionen funktionieren auf Touch-Geräten ohne jegliche Konfiguration.
Responsiver Pager
Der DataGrid-Pager verhält sich intelligent und passt seine gesamte Benutzeroberfläche responsiv an die Dimensionen an. Sein optimiertes Design bietet die beste Benutzerinteraktion auf verschiedenen Geräten.
Andere unterstützte Frameworks
Das DataGrid ist für die Frameworks Blazor, React, Angular und Vue verfügbar. Erkunden Sie die plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Das HTML5 DataGrid funktioniert gut mit allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.
Du weißt nicht, wie du dein erstes JavaScript DataGrid erstellen sollst? Unsere Dokumentation kann helfen.
Ich würde es jetzt gerne lesenÜber 145+ 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 solltest du dich für das Syncfusion JavaScript DataGrid entscheiden?
Das Syncfusion JavaScript DataGrid unterstützt die folgenden Funktionen:
Laden von Millionen von Datensätzen in nur einer Sekunde.
- Mobile-First-Design, das sich an jede Auflösung anpasst.
Flexible Datenbindung mit Unterstützung für lokale und entfernte Datenquellen wie JSON, RESTful-Dienste, OData-Dienste und WCF-Dienste.
Flexible Bearbeitung und intuitive Modi zur Auswahl von Datensätzen.
Integrierte Excel-ähnliche Filterung und Gruppierungs-Optionen.
Zahlreiche Spaltenanpassungen und Datensummen.
Nahtlose Datenexport-Optionen wie PDF, CSV und Excel.
- Eines der besten JavaScript DataGrid auf dem Markt mit einer funktionsreichen Benutzeroberfläche zur Interaktion mit der Software.
Einfache Konfiguration und API.
- Unterstützt alle modernen Browser.
Umfangreiche Lernressourcen wie Demos und Dokumentation, um schnell zu lernen und mit dem JavaScript DataGrid zu starten.
Was kostet das Syncfusion JavaScript DataGrid?
Wir verkaufen das JavaScript DataGrid nicht separat. Es ist nur als Teil der Syncfusion-Teamlizenz erhältlich. Diese enthält über 1,600 Komponenten und Frameworks, einschließlich des JavaScript DataGrid. Der Preis der Teamlizenz beginnt bei 395 $ pro Monat für 5 Entwickler und beinhaltet Support und Updates bis zum Ablauf des Abonnements. Zusätzlich können wir möglicherweise Rabatte basierend auf aktuell laufenden Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte qualifiziert sind.
Wo finde ich die Demo zum Syncfusion JavaScript DataGrid?
Sie finden unsere JavaScript DataGrid-Demo, die zeigt, wie das DataGrid gerendert und konfiguriert wird.
Kann ich die Syncfusion JavaScript DataGrid-Komponente separat erwerben?
Nein, unsere 1,600+ Komponenten und Frameworks für Web, Mobile und Desktop, einschließlich unseres JavaScript DataGrid, werden nicht einzeln verkauft. Sie sind nur als Teil einer Teamlizenz erhältlich. Wir haben das Produkt jedoch wettbewerbsfähig bepreist, sodass es nur geringfügig mehr kostet als das, was einige andere Anbieter allein für ihr DataGrid-Control verlangen. Außerdem haben wir festgestellt, dass unsere Kunden erfahrungsgemäß zunächst eines unserer Produkte verwenden und dann schnell auf mehrere Produkte erweitern. Daher hielten wir es für am besten, alle 1,600+ Komponenten und Frameworks zu einem Abonnementpreis anzubieten, der bei 395 $ pro Monat für ein Team von 5 Entwicklern beginnt. Zusätzlich können wir möglicherweise Rabatte basierend auf aktuell laufenden Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte qualifiziert sind.
Kann ich das Syncfusion JavaScript DataGrid kostenlos herunterladen und nutzen?
Nein, dies ist ein kommerzielles Produkt und erfordert eine kostenpflichtige Lizenz. Es ist jedoch auch eine kostenlose Community-Lizenz verfügbar für Unternehmen und Einzelpersonen, deren Organisationen weniger als 1 Million USD Jahresumsatz erzielen und fünf oder weniger Entwickler beschäftigen.
Wie beginne ich mit dem Syncfusion JavaScript DataGrid?
Ein guter Startpunkt ist unsere umfassende Erste-Schritte-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.
The best tool to operate grid-like data out there
Good documentation helps you with everything you need to know. What I like the most is that it takes you from configuration to usage. I have mainly used grid and toolbar options along with dashboard.
Ivan G,
Business Application Developer
Superior components:any day anytime
Essential Studio is one of a kind. The fact that they give us the community developer license has always shown how much they value the small teams creating their own startups. Essential Studio has helped a lot in my almost ready business intelligence platform for the healthcare industry. The grid and the kanban components are what made us fall in love with all the other components.
Kelvin M.
Software Development Engineer
Von Benutzern auf der ganzen Welt bewertet
Syncfusion JavaScript DataGrid-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.
Neueste Aktivitäten in den JavaScript DataGrid-blogs
Die Blogbeiträge zum JavaScript Data Grid helfen Ihnen beim Erstellen Ihrer ersten App mit JavaScript-Steuerelementen. Sie bieten Problemlösungsstrategien, beschreiben Funktionen und Eigenschaften, kündigen neue Feature-Releases an, erklären Best Practices und zeigen Beispielszenarien. Entdecken Sie unsere neuesten Beiträge auf unseren Blog-Kanälen für Updates zum JavaScript Data Grid.
