Erfahren Sie, wie Sie React Grid in 10 Minuten anpassen

Blog

Erfahren Sie, wie Sie React Grid in 10 Minuten anpassen

Erfahren Sie, wie Sie React Grid in 10 Minuten anpassen

Kunden lieben Datengitter reagieren Komponente von ag-Gitter für seine vielfältigen Anpassungsmöglichkeiten. Wir bei ag-Grid glauben, dass Entwickler in der Lage sein sollten, die Standardfunktionen einfach zu erweitern, um ihre Geschäftsanforderungen zu erfüllen. Aus diesem Grund sind die meisten Funktionen unseres React-Grids bereits komponentenbasiert. Sie können die Standardfunktionalität ganz einfach erweitern, indem Sie Ihre benutzerdefinierten React-Komponenten erstellen und in das Grid integrieren.



Im vorherigen Artikel über Erste Schritte mit React Grid , haben wir ag-Grid in die React-Anwendung integriert. Wenn Sie das Tutorial im Artikel noch nicht durchgearbeitet haben und daher noch keine Beispielanwendung haben, können Sie sie herunterladen von dieses GitHub-Repository .

Wir haben ag-Grid verwendet, um die folgenden Daten auf dem Bildschirm darzustellen:



Das ist der Bildtitel
Mit React Grid gerenderte Daten

In diesem Tutorial erweitern wir die Standardfunktionen zum Filtern, Bearbeiten und Rendern, die für die Spalte Preis verfügbar sind. Dazu implementieren wir einen benutzerdefinierten Filter, einen Zellenrenderer und einen Zelleneditor. Und wir haben alles in weniger als 10 Minuten erledigt. Folgendes werden wir zu unserem React-Raster hinzufügen.



Benutzerdefinierter Zellenrenderer

Zuerst implementieren wir einen benutzerdefinierten Zellrenderer, um Zahlen so zu formatieren, dass sie gemäß dem Gebietsschema eines Benutzers angezeigt werden. Wenn ich also in Europa bin, werden die Zahlen in der Spalte Preis wie folgt angezeigt:

Das ist der Bildtitel
Benutzerdefinierter Zellenrenderer für die Preisspalte

Benutzerdefinierter Zelleneditor

Da die Spalte Preis numerisch ist, darf sie keine nicht numerischen Zeichen enthalten. Standardmäßig können Benutzer beim Bearbeiten einer Zelle jedes beliebige Zeichen eingeben. Also implementieren wir einen benutzerdefinierten Zelleneditor, um die Eingabe nur auf Zahlen zu beschränken:

Das ist der Bildtitel
Benutzerdefinierter Zelleneditor für die Preisspalte

Benutzerdefinierte Filter

Und wir beenden dieses Tutorial, indem wir einen benutzerdefinierten Filter implementieren. Unser neuer Filter bietet eine Benutzeroberfläche, um die Preisspanne einzugeben und Autos herauszufiltern, die außerhalb dieser Spanne liegen:

Das ist der Bildtitel
Benutzerdefinierter Filter für die Preisspalte

Bereit anzufangen? Mal sehen, wie wir es schaffen.

Sie können das Beispiel herunterladen, das wir in diesem Artikel erstellen werden aus dem GitHub-Repository .

Individualisierung durch Komponenten

Sie können anpassen unsere React-Grid-Komponente durch benutzerdefinierte React-Komponenten. Neben dem |_+_| Methode, die für die Definition der Benutzeroberfläche verantwortlich ist, müssen diese Komponenten auch einige Methoden implementieren, die von ag-Grid aufgerufen werden. Ein Zelleneditor sollte beispielsweise |_+_| . implementieren Methode, die ag-Grid verwendet, um den Wert von unserer Komponente anzufordern und die Daten zu aktualisieren. Ein benutzerdefinierter Spaltenfilter sollte das |_+_| . implementieren Methode, die Werte verarbeitet und so weiter. Schnittstellen beschrieben in den docs definieren Sie diese erforderlichen Methoden. Während wir das Tutorial durchgehen, werden wir uns mit einigen von ihnen vertraut machen.

Benutzerdefinierter Zellenrenderer

Die Aufgabe des Rasters besteht darin, die Zellen zu gestalten. Standardmäßig erstellt das Raster die Zelle und rendert die Werte als einfachen Text. Wenn Sie komplexeres HTML in der Zelle wünschen oder den Wert vor dem Rendern anpassen müssen, können Sie dies mit einem benutzerdefinierten Zellrenderer tun. In diesem Tutorial möchten wir unsere Nummer gemäß dem Gebietsschema eines Benutzers formatieren, also ist dies der Anwendungsfall für eine benutzerdefinierte Renderer-Komponente. Dieser Renderer nutzt die eingebaute Funktion toLocaleString Werte zu formatieren.

zu viele Fehlversuche Cash-App

Benutzerdefinierte Komponente definieren

Um den Renderer zu implementieren, müssen wir zunächst eine React-Komponente implementieren. Es erhält den Wert einer Zelle durch React-Requisiten. Wir rendern den formatierten Wert in einem einfachen Span-HTML-Element.

Erstellen Sie also eine neue Datei |_+_| und fügen Sie den Code für unsere Komponente ein:

NumberFormatter.js

render

Es ist eine einfache Komponente mit nur einer Methode |_+_| das ein Span-Element zurückgibt, das den formatierten Text enthält.

Registrieren Sie die Komponente

Da wir nun unsere React-Komponente haben, müssen wir sie ag-Grid mitteilen. Alle benutzerdefinierten Komponenten sollten in der |_+_| . aufgeführt sein Konfigurationsmöglichkeit. Lassen Sie uns also unseren benutzerdefinierten Zellrenderer importieren und registrieren:

App.js

getValue

Geben Sie den Renderer für die Spalte an

Wir sind fast fertig. Es bleibt nur noch, unsere Komponente als Zellrenderer für die Preisspalte anzugeben. Das können wir in der Spaltendefinition tun:

App.js

doesFilterPass

Wenn Sie nun die Anwendung ausführen, sollten Sie den Preis formatiert sehen:

Das ist der Bildtitel

Formatierter Preis gemäß dem Gebietsschema eines Benutzers

Benutzerdefinierter Zelleneditor

Unser Reaktionsgitter bietet umfangreiche Bearbeitungsfunktionen. Es ähnelt einer Tabellenkalkulation, mit der Sie Daten inline bearbeiten können. Drücken Sie einfach |_+_| oder doppelklicken Sie auf eine Zelle und ag-Grid aktiviert den Bearbeitungsmodus. Sie müssen keinen benutzerdefinierten Editor für die einfache String-Bearbeitung bereitstellen. Wenn jedoch eine benutzerdefinierte Bearbeitungslogik erforderlich ist, müssen wir unseren Zelleneditor erstellen.

Python-URL im Browser öffnen

Bearbeiten aktivieren

Bevor wir mit der Arbeit an einer benutzerdefinierten Komponente beginnen, die als Editor fungiert, müssen wir die Bearbeitung für die |_+_| . aktivieren Säule:

App.js

NumberFormatter.js

Benutzerdefinierte Komponente definieren

Ähnlich wie bei einem benutzerdefinierten Zellenrenderer müssen wir eine React-Komponente definieren, die als Zelleneditor fungiert. Beginnen wir mit der grundlegenden Implementierung, die ein Eingabeelement mit einem von ag-Grid empfangenen Zellenwert rendert. Die Eingabe wird angezeigt, wenn ein Benutzer den Bearbeitungsmodus aktiviert:

CellEditor.js

import React, { Component } from 'react'; export class NumberFormatter extends Component { render() { const value = Number(this.props.value); const text = value.toLocaleString(undefined, {style: 'currency', currency: 'EUR'}); return ( {text} ) } }

Jetzt müssen wir einige erforderliche Methoden implementieren.

Sobald die Bearbeitung abgeschlossen ist, drücken Sie |_+_| oder den Fokus von der Eingabe wegbewegen, muss ag-Grid den Wert von unserem Editor erhalten. Es nennt die |_+_| -Methode für unsere React-Komponente, die das Ergebnis der Bearbeitung zurückgeben soll. In unserer Komponente ist es der Wert, den der Benutzer in die Eingabe eingegeben hat. Wir benötigen Zugriff auf diese Eingabe, um ihren Wert zu lesen. In React können wir die |_+_| Mechanismus, um dies zu erreichen. Hier ist die Umsetzung:

CellEditor.js

render

Beachten Sie, dass ich das |_+_| . verwende Mechanismus, der in den neuesten Versionen von React verfügbar ist. Kasse die Dokumentation um zu erfahren, wie Sie dies in früheren Versionen von React tun können.

Jetzt können wir die Funktionalität zum Herausfiltern nicht numerischer Zeichen implementieren. Dazu müssen wir der Eingabe einen Ereignis-Listener hinzufügen und jedes vom Benutzer eingegebene Element überprüfen. So machen wir es:

CellEditor.js

frameworkComponents

Wir möchten auch verhindern, dass der Fokus verloren geht, wenn ein Benutzer die Navigationstasten nach links und rechts drückt. Wir können die |_+_| . abfangen Ereignis und stoppen Sie die Weitergabe, wenn wir den Schlüssel erkennen:

CellEditor.js

import { NumberFormatter } from './NumberFormatter'; class App extends Component { constructor(props) { super(props); this.state = { ... frameworkComponents: { 'numberFormatter': NumberFormatter, } } } render() { return ( ); } }

Alles klar, jetzt haben wir fast alles eingerichtet. Hier ist das Letzte, was wir tun müssen. Wir möchten den Fokus auf die Eingabe in unserem benutzerdefinierten Zelleneditor lenken, sobald der Benutzer den Bearbeitungsmodus aktiviert. Praktischerweise |_+_| gibt uns die |_+_| Methode, die für diesen Zweck verwendet werden kann. Es wird einmal aufgerufen, nachdem die GUI an DOM angehängt wurde, und wir können die Referenz auf das Eingabeelement verwenden, um es zu fokussieren:

wie kaufe ich vra auf kucoin

NumericEditor.js

class App extends Component { constructor(props) { this.state = { columnDefs: [ {headerName: 'Make', field: 'make'}, {headerName: 'Model', field: 'model'}, { headerName: 'Price', field: 'price', editable: true, /* specify custom cell renderer */ cellRenderer: 'numberFormatter' } ],

Hier ist der vollständige Code zum Kopieren/Einfügen:

NumericEditor.js

F2

Registrieren Sie die Komponente

Ähnlich wie bei einem benutzerdefinierten Zellenrenderer müssen wir unseren Zelleneditor im |_+_| registrieren:

App.js

Price

Geben Sie den Editor für die Spalte an

Sobald wir unsere Komponente registriert haben, können wir sie als Editor für die Preisspalte angeben:

App.js

columnDefs: [ {headerName: 'Make', field: 'make'}, {headerName: 'Model', field: 'model'}, { headerName: 'Price', field: 'price', /* enable editing */ editable: true } ]

Und das ist es. Wir sind jetzt alle bereit, mit der Arbeit an unserer letzten Aufgabe zu beginnen, der Implementierung eines benutzerdefinierten Filters.

Benutzerdefinierter Spaltenfilter

Filtern ist eine der nützlichsten Funktionen von Datengrids. Es ermöglicht Benutzern, in eine bestimmte Gruppe von Datensätzen hineinzuzoomen. Unser React-Grid bietet eine einfache String-Filterung aus der Box. Wenn Sie jedoch Ihre benutzerdefinierten Filtertypen benötigen, sind benutzerdefinierte Filterkomponenten der richtige Weg. Die Komponente, an der wir arbeiten werden, bietet die Möglichkeit, Autos basierend auf einer Preisspanne herauszufiltern.

Filterung aktivieren

Bevor wir zur Implementierung der Filterkomponente kommen, müssen wir die Filterung im Grid aktivieren:

App.js

export class NumericCellEditor extends Component { render() { return ( ); } }

Benutzerdefinierte Komponente definieren

Um einen benutzerdefinierten Filter zu implementieren, folgen wir dem bekannten Anpassungsansatz und definieren eine React-Komponente. Die Benutzeroberfläche für unseren Filter wird als Eingabe und Schaltfläche zum Anwenden des Filters gerendert. Lassen Sie uns diesen HTML-Code in das |_+_| . einfügen Methode der Komponente:

RangeFilter.js

Enter

Benutzer verwenden unsere Filter-Benutzeroberfläche, um einen Bereich für einen Autopreis in Form von |_+_| anzugeben:

Das ist der Bildtitel

Preisspanne mit einem benutzerdefinierten Filter angeben

Wir müssen die aktuelle Filterbedingung im Zustand der Komponente speichern, also deklarieren wir die |_+_| Eigentum. Wenn die Eingabe angezeigt wird, möchten wir sie mit der aktuellen Filterbedingung vorausfüllen. Dazu können wir die |_+_| Eigentum. Hier ist der Code, der dies implementiert:

RangeFilter.js

getValue

Dann müssen wir die Benutzereingaben verarbeiten und im Zustand der Komponente speichern. Wir registrieren also einen Ereignis-Listener im Formular und verarbeiten Eingaben, wenn das Formular mit dem |_+_| . gesendet wird Taste:

RangeFilter.js

Refs

Bei jeder Änderung der Filterbedingung müssen wir nicht nur den Status aktualisieren, sondern auch ag-Grid über die Änderung informieren. Wir können das tun, indem wir die |_+_| die ag-Grid für uns durch die Komponenten-Requisiten bereitstellt. Ändern wir den Aufruf an |_+_| ein wenig und fügen Sie die Benachrichtigungslogik hinzu:
RangeFilter.js

export class NumericCellEditor extends Component { constructor(props) { super(props); this.textInput = React.createRef(); } render() { return ( ); } getValue() { return this.textInput.current.value; }; }

Wir sind jetzt mit der Benutzeroberfläche fertig.

Wie berechnet man die Varianz in Python?

Als nächstes müssen wir |_+_| . implementieren Methode, die eine Filterung durchführt. Es wird von ag-Grid aufgerufen, um zu bestimmen, ob ein Wert die aktuelle Filterbedingung erfüllt oder nicht. Wir müssen auch die Methode |_+_| . implementieren die von ag-Grid verwendet wird, um zu bestimmen, ob die Komponente eine anzuwendende Filterbedingung hat.

Lassen Sie uns diese Funktionalität zu unserer React-Komponente hinzufügen:

RangeFilter.js

React.createRef

Beachten Sie, dass wir auch die |_+_| . erhalten Funktion durch Komponenten-Requisiten. Es ist die Funktion von ag-Grid, um den aktuellen Wert einer Zelle abzurufen.

Filter speichern und wiederherstellen

ag-Grid implementiert API mit denen Filter bei Bedarf aktiviert und deaktiviert werden können. Normalerweise wird diese API von einem UI-Element wie einer Schaltfläche ausgelöst:

Das ist der Bildtitel
UI-Steuerelemente zum Speichern und Wiederherstellen von Filtern

Damit diese Funktionalität funktioniert, sollte unsere benutzerdefinierte Komponente zwei Methoden implementieren — |_+_| und |_+_|. ag-Grid-Aufrufe |_+_| um den Filter zu aktivieren und |_+_| um die aktuelle Filterbedingung zu erhalten. So implementieren wir diese Methoden in Code:

RangeFilter.js

export class NumericCellEditor extends Component { ... render() { return ( ); } onKeyPress(event) { if (!isNumeric(event.nativeEvent)) { event.preventDefault(); } function isNumeric(event) { return /d/.test(event.key); } } }

Wir sind fast fertig. Das Letzte, was wir tun müssen, ist, den Fokus auf die Eingabe zu legen, wenn sie angezeigt wird. Dazu verwenden wir das bekannte |_+_| zurückrufen:

RangeFilter.js

telcoin wie kaufe ich?
keydown

Komplette Umsetzung

Hier ist also der vollständige Code für unsere Komponente:
RangeFilter.js

export class NumericCellEditor extends Component { constructor(props) { super(props); this.textInput = React.createRef(); } onKeyDown(event) { if (event.keyCode === 39 || event.keyCode === 37) { event.stopPropagation(); } } componentDidMount() { this.textInput.current.addEventListener('keydown', this.onKeyDown); } ... }

Komponente in Spaltendefinition verwenden

Sobald wir unsere Komponente fertig haben, müssen wir sie im |_+_| . registrieren :
App.js

ag-Grid

Und dann geben Sie unseren benutzerdefinierten Filter für die |_+_| . an Säule:

App.js

afterGuiAttached

Bauen Sie Ihre eigene React-App mit ag-Grid!

Ich hoffe, dass die obigen Beispiele anschaulich gezeigt haben, wie einfach es ist, unser React-Grid anzupassen und zu konfigurieren.

Machen Sie jetzt den nächsten Schritt und nutzen Sie ag-Grid in Ihrem Projekt!

Sie werden selbst sehen, wie schnell und erweiterbar das Raster ist und was es so besonders macht bestes React Datagrid der Welt .

Schließen Sie sich den Millionen Entwicklern und Tausenden von Unternehmen an, die ag-Grid verwenden, um ihren Benutzern das bestmögliche Erlebnis zu bieten.

#reactjs #javascript #programmierung