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!