JavaScript & jQuery

Sheetrock – jQuery-Plugin für die flexible Anzeige von Google Tabellen auf jeder Website

2. Juni 2013
von

Chris Zarate mag Google Tabellen so sehr, dass er vor einigen Tagen auf Github ein jQuery-Plugin bereit stellte, mit dessen Hilfe sich Spreadsheets des Dienstes aus Mountain View auf jeder Website anzeigen lassen. Dabei ist die Ansicht sehr flexibel zu konfigurieren, sogar SQL-Befehle können eingesetzt werden, um gezielt nur bestimmte Ergebnisse zu filtern. Zudem ist der Einsatz äußerst einfach, wenn man SQL-Kenntnisse hat.

datentabelle

Sheetrock und Google Tabellen – ein gutes Team

Google Tabellen eignen sich außerordentlich gut für die kollaborative Datenverwaltung. Auch im redaktionellen Alltag begleiten mich die Spreadsheets schon seit vielen Jahren. Wäre es nicht schön, wenn es eine einfache Möglichkeit gäbe, die flexiblen Tabellen auf der eigenen Website einzubinden, eventuell noch mit der Option, Datenteilmengen zu filtern?

Wenn Sie, wie ich, damit etwas anfangen zu wissen, dann ist Sheetrock das Plugin für Sie. Alles, was Sie benötigen, um Sheetrock einzusetzen, ist das Plugin selbst und jQuery nebst der URL einer öffentlich zugänglichen Google Tabelle.

In seiner einfachsten Form sieht der Einsatz so aus. Zunächst gilt es eine Tabelle zu definieren. Die ID wird dem Script übergeben:

1
<table id="beispieltabelle"></table>

Die Funktion zur Anzeige des vollen Inhalts der entsprechenden Google Tabelle sieht dann so aus:

1
2
3
4
5
var mySpreadsheet = 'URL_zur_entsprechenden_Tabelle';
 
$( '#beispieltabelle' ).sheetrock({
  url: mySpreadsheet
});

Nicht immer wird man jedoch die volle Tabelle ungefiltert und unsortiert ausgeben wollen. Zudem empfiehlt es sich bei sehr großen Tabellen nicht, diese auf einen Schlag zu laden und zur Anzeige zu bringen. Unangenehme Wartezeiten auf Besucherseite wären unweigerlich die Folge dieser Vorgehensweise.

Daher fügen wir dem obigen Aufruf folgende Parameter hinzu:

1
2
sql: "select A,B,C,D,E,L where E = 'Both' order by L desc",
  chunkSize: 10

Der gesamte Aufruf sieht dann wie folgt aus:

1
2
3
4
5
6
7
var mySpreadsheet = 'URL_zur_entsprechenden_Tabelle';
 
$( '#beispieltabelle' ).sheetrock({
  url: mySpreadsheet
  sql: "select A,B,C,D,E,L where E = 'Both' order by L desc",
  chunkSize: 10
});

Über chunksize definieren wir die Anzahl der initial zu ladenden Reihen. Beim Herunterscrollen in der Tabelle werden dann stets 10 weitere Reihen nachgeladen.

sheetrock-640px
So kann eine Google Tabelle auf der eigenen Website aussehen, aber auch ganz anders…

Die Filterung der anzuzeigenden Daten erfolgt mit der an SQL angelehnten Google Visualization API Query Language. Wer sich also in der Vergangenheit schon mit Datenbankabfragen beschäftigen musste, wird sich in Sheetrock schnell heimisch fühlen. In den Links zum Beitrag finden Sie eine Anleitung, wie Sie Tabellen in Google Drive freigeben können.

Über sql definieren wir eine beliebig komplexe Abfrage. Darüber erreichen wir die hohe Flexibilität in der Anzeige der entsprechenden Google Tabelle. Spezielle Funktionen erlauben den Suchzugriff auf Spaltenbezeichnung anstelle derer Koordinaten, etwa select %Team% anstelle von select A. Ein einfaches select reicht natürlich auch, dann werden alle Spalten gezeigt.

Weitere Funktionen, wie die Verwendung verschiedener Template-Systeme, wie Underscores oder Handlebars, für die Anzeige, sowie die Umbenennung von Spalten zur Laufzeit und einiges mehr, ergänzen den ohnehin schon beachtlichen Funktionsumfang des noch in der sehr frühen Version 0.1 vorliegenden Plugins. Ein besonders nützliches Feature will ich noch erwähnen, nämlich userCallback, weil es sich hierbei um einen klassischen Callback-Hook handelt, der eingesetzt werden kann, um weitere Funktionen zu initiieren, sobald das Loading der Datentabelle abgeschlossen ist.

Sheetrock steht unter der MIT-Lizenz für private, wie kommerzielle Anwendungen auf Github zum Download und zur tätigen Mitwirkung bereit. Trotz des frühen Stadiums seiner Entwicklung läuft Sheetrock stabil und schnell, wobei das Geschwindigkeitsempfinden nicht ausschließlich durch Sheetrock beeinflusst ist, sondern viel mehr an der Auslastung der Google API hängt.

Wer Google Tabellen oder Ausschnitte daraus unkompliziert auf seiner Website einsetzen möchte, sollte Sheetrock auf jeden Fall testen. Durch die unkomplizierte Verfahrensweise ist das schnell erledigt.

Links zum Beitrag

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , , , ,

3 Kommentare zu „Sheetrock – jQuery-Plugin für die flexible Anzeige von Google Tabellen auf jeder Website
  1. Dennis am 3. Juni 2013 um 14:13

    Klasse! Ich habe das PlugIn gleich mal ausprobiert und es funktioniert bestens! Allerdings frage ich mich, ob es möglich ist das festgelegte Links aus meinem Spreadsheet erhalten bleiben. Zur Zeit bekomme ich zwar eine schöne Tabelle, aber alle Links werden ingnoriert…

  2. Marc am 7. Juni 2013 um 11:16

    Super, habs grad probiert, funktioniert wirklich einwandfrei! Wenn man öfter mit Tabellen zu tun hat ist das eine große Erleichterung!

  3. Bangster am 14. Juni 2013 um 13:30

    Wie sieht es denn mit MS Tabellen aus: Google nutzen doch wenige; und jetzt nach PRISM weiß ich eh nicht, ob net FBI, FSB, MI6, NSA, CIA, KGB und Konsortien meine Sheets lesen.

    MS traue ich; der Gates hat doch ne Stiftung, die hilft dann den Abhör-Opfern sicherlich.

    Grüßle
    Bangster

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!