8 JavaScript Grid Controls

Die folgende Liste bietet nur einen groben Überblick über die erhätlichen JavaScript-basierten DataGrids die es momentan gibt. Sie ist vermutlich in keiner Weise vollständig (was alleine daher schon problematisch ist, da dauernd neue veröffentlicht werden ) Den Fokus habe ich hier auf kostenlos erhältliche Lösungen gelegt.

jQuery

Fangen wir gleich mit einem der Grids an, die die meisten Features bieten. jqGrid steht unter der GPL und bietet eigentlich alles was das Herz begehrt.

jqGrid mit Subgrid

Daten können z.B. per XML/JSON oder AJAX geladen werden, man kann Zelleninhalte editieren, Subgrids einblenden (für hierarchische Daten) und vieles mehr.

Ingrid ist etwas einfacher gestrickt, aber trotzdem sehr gut. Es bietet die üblichen Features wie Pagination, Sortierung oder dynamisches nachladen von Daten.

Ingrid

Zu guter Letzt möchte ich noch Flexigrid vorstellen. Man könnte Flexigrid als Zwischending von Ingrid und jqGrid bezeichnen. Es bietet alle Features von Ingrid, kann aber noch ein wenig mehr (wenn auch nicht ganz soviel wie jqGrid). Z.B. kann man recht problemlos einen Toolbar zum Grid hinzufügen über den man Aktionen starten kann.

Flexigrid mit Toolbar

Mein persönlicher Liebling ist momentan Flexigrid. Aber ich denke, dass hängt sehr stark davon ab, welche Features man braucht.

mooTools

OmniGrid ist das Einzige “richtige” Grid, dass ich bisher für mootools gefunden habe (was nicht heissen muss, dass es keine Anderen gibt )

OmniGrid

Es ist von FlexiGrid und phatfusion:sortable table inspiriert und nutzt teilweise deren Code.

DrasticGrid steht unter der GPL und bietet grösstenteils Standardkost. Die angezeigten Daten sind sortierbar, daten können per AJAX geladen werden, etc. Alles in Allem ein recht unspektakuläres Grid.

mootable könnte man am ehesten als aufgebohrtes <table> Tag bezeichnen. Es fehlen viele Features die man von den anderen Grids kennt. mootables können sortiert werden. Spalten können sortiert, vergrössert/-kleinert und ein-/ausgeblendet werden. Im grossen und Ganzen scheinen das alle Features zu sein.

phatfusion sortable table

sortable table von phatfusion steht unter der MIT-Lizenz und ist klein aber fein Es bietet zwar keinen Automatismus zum Nachladen von Daten per Ajax/JSON/etc. – kann aber <table>’s sortieren, filtern, etc.

Stand-Alone

SigmaGrid2 ist das einzige Grid welches ich hier vorstellen möchte, welches nicht auf einem der grossen Frameworks basiert.

SigmaGrid im Master-Detail Modus

Das Grid bietet einen wirklich überwältigenden Funktionsumfang. Es ist sortierbar, hat einen Druck-Modus, kann Diagramme erzeugen, und vieles mehr. Ich empfehle einen Blick auf die Demos zu werfen die auf der Homepage zu finden sind.

Verwandte Themen:

1. d3.js – Daten mit JavaScript visualisieren (und mehr)
2. Elycharts – Diagramme mit JavaScript zeichnen
3. 140byt.es – JavaScript-Schnippsel in Tweet-Grösse
4. cdnjs – Javascript-Bibliotheken von einem CDN aus einbinden