Ein bearbeitbares Netz mit JQuery, Bootstrap und Shield Ui Lite

In diesem kurzen Tipp stelle ich ein paar einfache Schritte zur Einrichtung eines bearbeitbaren Netzes (oder einer Tabelle) mit Bootstrap und Shield UI Lite an.

Shield UI Lite ist eine Open -Source -JQuery -Bibliothek, die unter anderem ein JQuery -Netz enthält. Das Raster unterstützt die Bearbeitung außerhalb des Boxs sowie Sortieren, Gruppierung und verschiedene Spaltenredakteure.

Key Takeaways

• Shield UI Lite ist eine Open -Source -JQuery -Bibliothek, die ein JQuery -Raster enthält, das Bearbeitung, Sortieren, Gruppierung und verschiedene Spaltenredakteure unterstützt. Das Netz unterstützt auch die Bindung aller Arten von Daten, von lokalen JSON -Strukturen bis hin zu Remote -Webdiensten.
• Um ein bearbeitbares Netz einzurichten . Das Netz kann mit CSS angepasst werden und ist mit anderen JavaScript -Bibliotheken kompatibel.
• Das bearbeitbare Gitter kann mit einer Datenbank verwendet werden, Daten aus verschiedenen Quellen wie einem lokalen Array, einer JSON -Datei oder einem Remote -Server laden und Daten in verschiedene Formate wie CSV, Excel und PDF exportieren. Es unterstützt auch integrierte Validierungsfunktionen und Fehlerbehandlung.

Über Schild Ui Lite

Shield UI ist ein Webkomponenten -Entwicklungsunternehmen, das sich auf das Design, die Entwicklung und Vermarktung von UI -Widgets für die reine JavaScript -Entwicklung sowie für die Entwicklung in ASP.NET, ASP.NET MVC und Java Wicket spezialisiert hat. Das Unternehmen bietet Datenvisualisierungskomponenten sowie eine ganze Reihe von Standard -Webentwicklungskomponenten wie Gitter, Barcodes - ein und zweidimensionale, erweiterte Eingangskomponenten wie numerische und maskierte Textboxen und viele mehr an.

Die Shield UI Lite Suite ist eine der neuesten Open -Source -Bibliotheken auf dem Markt, und das ist spezifisch, dass sie eine Fülle von Komponenten enthält, die alle reich und reif sind. Dies schließt das JQuery Grid ein, das alle wichtigen Webnetzvorgänge außerhalb des Boxs unterstützt. Die Komponente unterstützt die Bearbeitung entweder mit Inline- oder Standard -Bearbeitungsform -Bearbeitung sowie die Bearbeitung mit einem externen Formular. Ebenfalls unterstützt ist Zellbearbeitung.

Darüber hinaus verfügt das Shield UI-Gitter über eine integrierte Datenquelle, die die Bindung an alle Arten von Daten erleichtert-von lokalen JSON-Strukturen, an Remote-Webdienste. Die integrierte DataSource kümmert sich auch um alle Operationen für Lösch-, Aktualisierungs- und Einfügen.

Für datenhaarige Anwendungen bietet das Shield UI JQuery-Widget eine verbesserte virtuelle Scrolling-Funktion erheblich verbessert die Leistung erheblich, selbst wenn sie mit Millionen realer Datenaufzeichnungen arbeiten. Um weitere Beispiele für die Komponente und ihre Optionen anzuzeigen, können Sie sich auf die Online -Demos oder die Dokumentation verweisen.

Verwenden Sie den Code

Für das bearbeitbare Netz, das wir erstellen, verwende ich eine lokale Datenquelle, um die Dinge einfach zu halten. Der Quellcode für die Bibliotheken finden Sie in GitHub. Der vollständige Beispielcode zusammen mit allen verwendeten Beispieldaten sowie zusätzlichem CSS ist in der Codepen -Demo verfügbar.

Der erste Schritt beim Einrichten des Layouts besteht darin, einen Standard -Bootstrap -Container zu verwenden. In unserem Fall ist dies ein DIV mit einem im Inneren verschachtelten Bootstrap -Panel. Da in jeder Standard -Webgitterkomponente normalerweise viele Daten hostet, erstreckt sich unser Layout über die volle Breite des Bildschirms.

Der Code für diesen Schritt ist unkompliziert und sieht so aus:

<span><span><span><div</span> class<span>="col-md-12"</span>></span>
</span>  <span><span><span><div</span> class<span>="panel panel-default"</span>></span>
</span>    <span><span><span><div</span> class<span>="panel-heading"</span>></span>
</span>      <span><span><span><h4</span> class<span>="text-center"</span>></span>Bootstrap Editable jQuery Grid
</span>      <span><span><span><span</span> class<span>="fa fa-edit pull-right bigicon"</span>></span><span><span></span</span>></span><span><span></h4</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="panel-body text-center"</span>></span>
</span>      <span><span><span><div</span> id<span>="grid"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Dies ist alles, was für die Einrichtung der Probe benötigt wird. Im nächsten Schritt werden alle im Beispiel verwendeten Ressourcen verweist

Die für das Beispiel verwendeten Daten sind eine Standard -JSON -Sammlung, die separat geladen wird, um an die Netzkomponente übergeben zu werden. Die Verwendung einer lokalen Datenquelle vereinfacht das Setup. Zusätzlich brauchen wir das Stylesheet für das Raster und das JavaScript für die Initialisierung.

Die Einbeziehung dieser Ressourcen wird unten gezeigt:

Die CSS:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="shieldui-lite.min.css"</span>></span></span>

Die Skripte:

<span><span><span><script</span> src<span>="shieldui-lite-all.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="shortGridData.js"</span>></span><span><span></script</span>></span></span>

Einrichten des Netzes

Der nächste Schritt im Prozess ist die Einrichtung der Schild UI Lite Grid -Komponente. Sobald wir die erforderlichen Ressourcen aufgenommen haben, können wir sie mit einem JavaScript im Dokument initialisieren.

Es gibt zwei logische Teile bei der Beschreibung der Komponente. Der erste ist der Umgang mit der Datenquelle für die Daten, die im Raster visualisiert werden, und die andere richtet die Spalten ein, die tatsächlich gerendert werden, sowie alle zusätzlichen Einstellungen wie Sortieren, Schwebeffekte usw.

Das Shield UI Lite Grid verfügt über eine integrierte DataSource-Eigenschaft, mit der das Widget einfach an alle Daten binden-lokal oder fernbedingt. Um die Datenquelle mit den JSON -Daten zu verknüpfen, verwenden wir die Dateneigenschaft und beschreiben die Felder, die abgerufen werden.

Der Code, um dies zu erreichen, ist unten dargestellt:

Aktivieren von Bearbeiten

<span>dataSource: {
</span>  <span>data: gridData,
</span>  <span>schema: {
</span>    <span>fields: {
</span>      <span>id: { path: "id", type: Number },
</span>      <span>age: { path: "age", type: Number },
</span>      <span>name: { path: "name", type: String },
</span>      <span>company: { path: "company", type: String },
</span>      <span>month: { path: "month", type: Date },
</span>      <span>isActive: { path: "isActive", type: Boolean },
</span>      <span>email: { path: "email", type: String },
</span>      <span>transport: { path: "transport", type: String }
</span>    <span>}
</span>  <span>}
</span><span>}</span>

Der nächste Schritt bei der Einrichtung der Anwendung besteht darin, zu wählen, welche Eigenschaften im Raster verfügbar sind, sowie die Beschreibung der Spalten, die gerendert werden.

Jede Spalte kann zusätzliche Eigenschaften haben, wie z. B. Header -Text und Breite. Die Width -Immobilieneinstellung ist nicht obligatorisch, bietet jedoch zusätzliche Flexibilität für die Verteilung des Gesamtlayouts.

Der Code für alle Eigenschaften im Steuerelement ist unten aufgeführt:

<span><span><span><div</span> class<span>="col-md-12"</span>></span>
</span>  <span><span><span><div</span> class<span>="panel panel-default"</span>></span>
</span>    <span><span><span><div</span> class<span>="panel-heading"</span>></span>
</span>      <span><span><span><h4</span> class<span>="text-center"</span>></span>Bootstrap Editable jQuery Grid
</span>      <span><span><span><span</span> class<span>="fa fa-edit pull-right bigicon"</span>></span><span><span></span</span>></span><span><span></h4</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="panel-body text-center"</span>></span>
</span>      <span><span><span><div</span> id<span>="grid"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Einrichten eines benutzerdefinierten Editors

Das Widget unterstützt eine Reihe von praktischen Redakteuren außerhalb des Box. Sobald die Steuerung in den Bearbeitungsmodus eingesetzt wurde, hängt der Editor für die Zelle durch Klicken auf eine der Zellen von der Art der Werte in dieser Zelle ab. Beispielsweise hat ein numerischer Wert eine numerische Eingabe mit Inkrement- und Dekrement -Schaltflächen. Eine Datumsspalte hat eine Kalendereingabe für die einfache Auswahl eines Datums.

Es gibt auch die Möglichkeit, einen benutzerdefinierten Editor für eine Spalte zu liefern. Anstatt ein Standardtextfeld zu haben, können wir beispielsweise einen Dropdown mit allen Werten für diese Spalte haben.

Dies kann erreicht werden, indem sich an das GetCustomeditorValue -Ereignis angeschlossen und für jede Zelle einen benutzerdefinierten Editor übergeben.

Dies wird im folgenden Code -Snippet für die Ereignisse gezeigt:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="shieldui-lite.min.css"</span>></span></span>

und der benutzerdefinierte Editor:

<span><span><span><script</span> src<span>="shieldui-lite-all.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="shortGridData.js"</span>></span><span><span></script</span>></span></span>

Wenn Sie weitere Informationen zu den Optionen im Grid -Widget überprüfen möchten, können Sie sich auf diesen Abschnitt der Dokumentation beziehen.

Dies vervollständigt unser Setup und die Steuerung ist einsatzbereit.

Die vollständige funktionierende Demo auf CodePen

anzeigen

Klicken Sie unbedingt in eine der Inhaltszellen in der Tabelle/Grid, um zu sehen, wie die Bearbeitungsfunktion funktioniert. Sie können weitere Beispiele zur Verwendung der Shield UI JQuery Grid -Komponente auf der Shield UI -Website anzeigen.

häufig gestellte Fragen (FAQs) zu bearbeitbarem Raster mit JQuery und Bootstrap

Wie kann ich das Erscheinungsbild des bearbeitbaren Netzes anpassen? Sie können die Farben, Schriftarten, Grenzen und andere visuelle Elemente des Netzes so ändern, dass sie dem Design Ihrer Website entsprechen. Sie können auch die integrierten Kurse von Bootstrap verwenden, um Ihr Netz schnell zu stylen. Für fortgeschrittenere Anpassungen können Sie die API von Shield Ui Lite verwenden, die eine Vielzahl von Optionen zum Ändern des Erscheinungsbilds und des Verhaltens des Netzes bietet. Ja, das bearbeitbare Netz ist mit anderen JavaScript -Bibliotheken wie AngularJs, React und Vue.js. kompatibel. Sie können diese Bibliotheken verwenden, um die Funktionalität Ihres Gitters zu verbessern, z. B. das Hinzufügen dynamischer Datenladen-, Sortier- und Filterfunktionen. Mit der API des Netzes können Sie Zeilen in das bearbeitbare Netz hinzufügen oder entfernen. Die API bietet Methoden zum Hinzufügen neuer Zeilen, zum Löschen vorhandener Zeilen und zum Aktualisieren der Daten im Netz. Sie können auch die API verwenden, um Zeilen programmgesteuert auszuwählen, was für die Implementierung von Massenbearbeitungs- oder Löschfunktionen nützlich sein kann.

Wie kann ich die Benutzereingabe in das bearbeitbare Netz validieren? Die Bibliothek enthält eine Vielzahl von Validierungsregeln, z. B. die erforderlichen Felder, Zahlenbereiche und E -Mail -Formate. Sie können auch benutzerdefinierte Validierungsregeln erstellen, um komplexere Validierungsszenarien zu verarbeiten.

Kann ich die Daten aus dem bearbeitbaren Netz exportieren? wie CSV, Excel und PDF. Dies kann mit der API des Rasters erfolgen, die Methoden zum Exportieren der Gitterdaten bereitstellt. Sie können auch die exportierten Daten anpassen, z. B. das Einbeziehen oder Ausschluss bestimmter Spalten oder die Formatierung der Daten auf eine bestimmte Weise. Daten in das bearbeitbare Netz aus verschiedenen Quellen wie einem örtlichen Array, einer JSON -Datei oder einem Remote -Server. Die API des Grids enthält Methoden zum Laden von Daten. Sie können diese Methoden in Kombination mit AJAX zum Laden von Daten von einem Server verwenden. Das bearbeitbare Netz reagiert und kann in einer mobilen Anwendung verwendet werden. Das Layout des Rasters wird automatisch an die Bildschirmgröße angepasst. Sie können das Verhalten des Rasters auch mit CSS -Medienabfragen auf verschiedenen Geräten anpassen. 🎜> Sie können Daten mit der API des Rasters sortieren und filtern. Die API enthält Methoden zum Sortieren von Daten nach einer oder mehreren Spalten und zum Filtern von Daten basierend auf verschiedenen Kriterien. Sie können diese Methoden auch in Kombination mit AJAX verwenden, um die serverseitige Sortierung und Filterung zu implementieren.

Kann ich das bearbeitbare Gitter mit einer Datenbank verwenden? eine Datenbank. Sie können Daten aus einer Datenbank in das Netz laden und die Datenbank auch mit Änderungen im Raster aktualisieren. Dies kann mit AJAX in Kombination mit einer serverseitigen Sprache wie PHP, ASP.NET oder NODE.JS.

erfolgen Kann Fehler im bearbeitbaren Netz mit den integrierten Fehlerbehandlungsfunktionen von Shield UI Lite verarbeiten. Die Bibliothek enthält Methoden zum Anzeigen von Fehlermeldungen, zum Hervorheben von ungültigen Feldern und zur Verhinderung der Speichern von ungültigen Daten. Sie können auch das Fehlerbehandlungsverhalten an Ihre Anforderungen anpassen.

Das obige ist der detaillierte Inhalt vonEin bearbeitbares Netz mit JQuery, Bootstrap und Shield Ui Lite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!