Bestes dynamisches JavaScript / JQuery-Raster [geschlossen]


87

Ich arbeite mit JavaScript, JQuery und HTML. Die Benutzeroberfläche meines Projekts ist vollständig dynamisch. Ich suche ein dynamisches JavaScript / JQuery-Raster, das die folgenden Funktionen unterstützt.

Kann mir jemand sagen, dass es ein gut aussehendes Open-Source-Grid gibt, das die folgenden Funktionen unterstützt?

  1. Ich sollte in der Lage sein, zur Laufzeit eine Instanz des Rasters zu erstellen und zu DOM hinzuzufügen.
  2. Unterstützt Spaltenvorlagen (Textfeld, Auswahl, Kontrollkästchen oder beliebige Eingaben oder einfacher Text)
  3. Unterstützt das Festlegen einer neuen Spaltenvorlage oder das Ersetzen einer vorhandenen Spaltenvorlage in Echtzeit.
  4. In einer Spalte sind möglicherweise nur wenige Eingabesteuerelemente (z. B. Textfeld, Kontrollkästchen ..) aktiviert und nur wenige deaktiviert .
  5. Unterstützt setData () in Echtzeit.
  6. Unterstützt Ereignisse, wenn Eingabedaten vom Benutzer geändert wurden.
  7. Es sollte die Auswahl einer Zeile unterstützen
  8. Hinzufügen von Zeilen oder Löschen von Zeilenunterstützung in Echtzeit, ohne das gesamte Raster zu rendern.
  9. Unterstützt Paging.
  10. Unterstützt das Sortieren nach einer beliebigen Spalte in Echtzeit.
  11. Löst ein Ereignis aus, wenn die Daten in Echtzeit vom Benutzer sortiert werden.
  12. Die Raster-Benutzeroberfläche muss realisierbare Spalten unterstützen
  13. Automatische Größenänderung (Es ist großartig, wenn das Raster entsprechend der Größe des übergeordneten Elements automatisch angepasst werden kann.)
  14. Hat auf jeden Fall eine gute Dokumentation.

7
Schreiben Sie es selbst. Wenn Sie all diese Funktionen nutzen möchten, müssen Sie dies selbst tun. Die benutzerdefinierte Lösung ist immer die beste Lösung.
Raynos

28
Ich bin mir nicht sicher, ob es immer die beste Lösung ist. Ich meine - ich bin nicht im Begriff, meine eigene Datenbank-Engine zu erstellen, anstatt InnoDB zu verwenden ...
Grim ...

2
@ Roynos, ich habe selbst einige Dinge geschrieben, aber ich muss viel Zeit investieren, um alle Funktionen wie Sortieren, Ändern der Größe usw. zu implementieren. Deshalb suche ich nach einer Rastersteuerung. Ich bewerte immer noch alle Gitter einzeln.
Somnath

22
@ Raynos Das ist lächerlich. Die beste Lösung ist die Lösung, die zu den niedrigsten Kosten arbeitet. Warum bauen, wenn es schon fertig ist?
Richard

@ RichardDesLonde du hast recht. Meine Option ist es, die vorhandene beste Lösung auszuwählen und sie gemäß Ihren Anforderungen zu erweitern.
Somnath

Antworten:


42

Einige nützliche sind:

Frei:

Bezahlt:

Die besten Einträge sind meiner Meinung nach Flexigrid und jQuery Grid.


Bis jetzt mochte ich jQuery Grid. trirand.com/blog/jqgrid/jqgrid.html Aber ich bin mir immer noch nicht sicher. Halten Sie auf dem Laufenden ...
Somnath

@Somnath - Ist jQuery Grid dasjenige, mit dem Sie am meisten zufrieden waren? Ich habe einen ähnlichen Bedarf und habe DataTables ausgewertet, aber das Hinzufügen von Zeilen (und deren Aufnahme in die Sortierreihenfolge) funktioniert nicht gut.
MattW

@MattW Ja, ich mag jQuery Grid. Das Hinzufügen von Daten ist wirklich einfach. Sie können auch jede Spalte sortieren, indem Sie ein Flag setzen. Meine Anforderungsliste war wirklich groß. Aber nur wenige Dinge baue ich selbst und für einige Fälle verwende ich jQuery Grid. Es wurde auch coole und einfache API. Zu diesem Zeitpunkt bin ich mit jQuery Grid zufrieden. Das ist gut.
Somnath

@ Somnath Also, welches hast du endlich ausgewählt? Ich Header DataTable ist auch eine gute Option. Welches ist am schnellsten? Und welches unterstützt die Gruppierung?
Vivek Vardhan

@VivekVardhan Ich benutze trirand.com/blog/jqgrid/jqgrid.html
Somnath

38

Sie können http://datatables.net/ versuchen

DataTables ist ein Plug-In für die jQuery Javascript-Bibliothek. Es ist ein hochflexibles Tool, das auf den Grundlagen der progressiven Verbesserung basiert und jeder HTML-Tabelle erweiterte Interaktionssteuerelemente hinzufügt. Hauptmerkmale:

  • Paginierung mit variabler Länge
  • On-the-Fly-Filterung
  • Mehrspaltige Sortierung mit Datentyperkennung
  • Intelligente Handhabung von Spaltenbreiten
  • Zeigen Sie Daten aus nahezu jeder Datenquelle an
  • DOM, Javascript-Array, Ajax-Datei und serverseitige Verarbeitung (PHP, C #, Perl, Ruby, AIR, Gears usw.)
  • Bildlaufoptionen für das Tabellenansichtsfenster
  • Voll internationalisierbar
  • Unterstützung für jQuery UI ThemeRoller
  • Ganz solide - unterstützt durch eine Reihe von mehr als 2600 Unit-Tests
  • Große Auswahl an Plug-Ins Inc. TableTools, FixedColumns, KeyTable und mehr
  • Es ist kostenlos!
  • Staatssparen
  • Versteckte Spalten
  • Dynamische Erstellung von Tabellen
  • Ajax automatisches Laden von Daten
  • Benutzerdefinierte DOM-Positionierung
  • Einspaltige Filterung
  • Alternative Paginierungsarten
  • Zerstörungsfreie DOM-Interaktion
  • Hervorheben der Sortierspalte (n)
  • Erweiterte Datenquellenoptionen
  • Umfangreiche Plug-In-Unterstützung
  • Sortieren, Typerkennung, API-Funktionen, Paginierung und Filterung
  • Vollständig thematisierbar mit CSS
  • Solide Dokumentation
  • 110+ vorgefertigte Beispiele
  • Volle Unterstützung für Adobe AIR

3
Bitte formatieren Sie die wichtigsten Funktionen ordnungsgemäß. Verwenden Sie nicht nur Kopieren / Einfügen. Müssen Sie es nach dem Kopieren / Einfügen einmal lesen?

Was bedeutet "zerstörungsfreie DOM-Interaktion"? Es fällt mir schwer zu verstehen, warum dies neu oder ein Feature ist und was es abdeckt / garantiert.
John Zabroski

1
@ John wird auf der verlinkten Seite nicht mehr erwähnt, aber wenn Sie im Internet nach diesem Satz suchen, werden Sie feststellen: "Die größte Änderung in Version 1.4 ist die zerstörungsfreie DOM-Interaktion. Dies bedeutet, dass DataTables nicht überschrieben werden Die Tabellenelemente, um ihre Funktionen auszuführen (echte progressive Verbesserung!), verschieben vielmehr die Elemente. In Version 1.3 und bevor der für den Körper bei jeder Zeichnung erforderliche HTML-Code dynamisch erstellt wird, ist dies nicht mehr der Fall. Der unmittelbare Vorteil ist, dass alle Attribute (Klassen usw.) in der Originaltabelle erhalten bleiben [...] "
CodeCaster

5
Ich denke, es ist keine freie Software, mmm, ein Problem damit.
David

4
Anscheinend sind diese coolen DataTables-Raster nicht bearbeitbar, und wenn Sie sie brauchen, müssen Sie für die bearbeitbare Version bezahlen: editor.datatables.net/purchase/index
anderer Coder

8

Mein Vorschlag für ein dynamisches JQuery-Raster ist unten aufgeführt.

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

Das Beste ist:

DataTables ist ein Plug-In für die jQuery Javascript-Bibliothek. Es ist ein hochflexibles Tool, das auf den Grundlagen der progressiven Verbesserung basiert und jeder HTML-Tabelle erweiterte Interaktionssteuerelemente hinzufügt.

Paginierung mit variabler Länge

On-the-Fly-Filterung

Mehrspaltige Sortierung mit Datentyperkennung

Intelligente Handhabung von Spaltenbreiten

Zeigen Sie Daten aus nahezu jeder Datenquelle an

DOM, Javascript-Array, Ajax-Datei und serverseitige Verarbeitung (PHP, C #, Perl, Ruby, AIR, Gears usw.)

Bildlaufoptionen für das Tabellenansichtsfenster

Voll internationalisierbar

Unterstützung für jQuery UI ThemeRoller

Ganz solide - unterstützt durch eine Reihe von mehr als 2600 Unit-Tests

Große Auswahl an Plug-Ins Inc. TableTools, FixedColumns, KeyTable und mehr

Dynamische Erstellung von Tabellen

Ajax automatisches Laden von Daten

Benutzerdefinierte DOM-Positionierung

Einspaltige Filterung

Alternative Paginierungsarten

Zerstörungsfreie DOM-Interaktion

Hervorheben der Sortierspalte (n)

Erweiterte Datenquellenoptionen

Umfangreiche Plug-In-Unterstützung

Sortieren, Typerkennung, API-Funktionen, Paginierung und Filterung

Vollständig thematisierbar mit CSS

Solide Dokumentation

110+ vorgefertigte Beispiele

Volle Unterstützung für Adobe AIR


5

Werfen Sie einen Blick auf agiletoolkit.org, da dies eine einfach zu verwendende CRUD hat, die 2,4,6,7,9,10 und 12 sofort unterstützt (verwendet Ajax, um das Raster beim Hinzufügen, Löschen von Daten zu verteidigen, und integriert sich in jquery.

Ich würde einige Beispiele veröffentlichen, aber im Moment auf einem iPad.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.