Schnelle Darstellung von Daten mit Recline.js

Manchmal sind die Anforderungen eines Kunden ganz einfach: eine CSV-Datei als sortierbare Tabelle online stellen zum Beispiel. Hört sich einfach an, ist aber nicht von jetzt auf gleich umzusetzen. Oder besser ausgedrückt: bisher war das so – Dinge ändern sich! ;) Das man Tabellen fein sortieren kann, durchsuchen und Paginieren ist ja nicht unbedingt erst seit Twitter Bootstrap so, sondern schon länger bekannt.

Screenshot einer Tabelle aus Recline.js

Viel schöner wäre es doch, wenn man ein jQuery-Plugin hätte dem man sagt: hey, hier sind meine Daten, mach was draus! Und genau das macht recline.js – mit Tabellen, Graphen und hast du nicht gesehen. Gut, es braucht prinzipiell noch Backbone.js und Underscore.js, aber das sollte wohl kein Problem sein. Dann lässt man es einfach auf eine Datensammlung los, und gut ist. Die Konfiguration kann hierbei von recht einfach bis hin zu recht komplex erfolgen. Dies liegt wiederum daran, das Recline.js Graphen in jeglicher Forum und sogar Daten auf Landkarten darstellen kann.

Recline.js macht übrigens auch nicht vor Google Docs halt, und kann recht einfach ein Spreadsheet in die eigene Seite holen. Zurück zu unserer eigentlichen Anforderung, der CSV-Datei, hierfür liefert ein Tutorial den folgenden Code:

// CSV definieren
var dataset = new recline.Model.Dataset({
  url: '..//demos/data/sample.csv',
  backend: 'csv',
  // separator: ',',
  // delimiter: '"',
  // encoding: 'utf8'
});
 
// Daten einlesen
dataset.fetch();
 
// Grid aufbauen und Daten rendern
var grid = new recline.View.Grid({
  model: dataset
});
$('#my-online-csv').append(grid.el);

Fertig – schneller gehts wohl nicht mehr, und besser wohl auch nicht. Man könnte jetzt noch hingehen und Spalten sortierebar machen, eine Paginierung drauf setzen oder eine Suche rein stecken, aber in der Regel reichen diese paar Zeilen. Es erübrigt sich dann jetzt wohl auch zu sagen, das Recline.js Events und die entsprechenden Hooks besitzt um alles und jedes anzupassen – man könnte auch sagen: ich bin begeistert! ;)

Ähnliche Beiträge

Drupal, die White Screen of Death und das Byte Ord... Was ein Titel – hollywoodtauglich! :) Aber durchaus mit einem Hintergrund: Drupal kann in einen Zustand geraten, wo es außer einer weißen Seite (der W...
Dummy HTML Snippets für Entwickler Mal was schnelles für zwischendurch: In letzter Zeit ist irgendwie ein regelrechter Hype um das gute alte Lorem Ipsum entstanden. Es gibt den Standard...
Das Wunder des Live Reloads Ich zeige mich ja selten begeistert von Neuerungen muss ich sagen, ich könnte durchaus noch mit dem Notepad entwickeln wenn ich es wollte. Nach wochen...
Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.