201024Jan

jQuery.sheet: Editierbare Tabellen auf Websites

Mit JavaScript lassen sich neben einfachen Effekten auch aufwendige Bedienelemente auf Websites integrieren. Ein denkbares Szenario wären so auch Tabellen (Spreadsheets), die sich wie in Microsofts Excel editieren lassen. Möglich wird das beispielsweise mit dem jQuery-Plugin "jQuery.sheet" von Robert Plummer. Das umfangreiche Skript bietet etliche Funktionalitäten, die für die Bearbeitung von Tabellendaten notwendig sind. Dazu zählen sowohl Funktionen (Summe, Differenz, usw.) als auch die Darstellung von Diagrammen (Google Chart API) in Tabellenzellen. Ein fertige Demo, die gleichzeitig auch die Dokumentation des Plugins darstellt, findet sich hier.

jQuery.sheet

Das Plugin besteht aus über 2500 Zeilen Code und hat eine Größe vov 43 KB (minified). Durch den jQuery UI ThemeRoller lassen sich per Knopfdruck fertige Farbsets (Themes) auf die interaktive Tabelle anwenden. Als Basis für eine Tabelle dient HTML-Code mit einer entsprechenden table-Struktur. Der Autor nutzt für sein Beispiel Ausschnitte aus dieser Tabelle. Implementieren lässt sich das jQuery-Plugin beispielsweise mit folgendem Code:

  • $("element").sheet({
  • urlGet: "tabelle.html"
  • });

Als Platzhalter für die Tabelle dient ein einfacher div-Container. Das Skript bietet verschiedene Optionen zur Anpassung des Tabellenbereichs.
Wer noch weitere Möglichkeiten zur Integration von dynamischen Tabellen auf Websites sucht, sollte bei Roberto Bicchierai vorbeischauen — hier findet sich eine große Liste mit verschiedenen Tabellen-Anwendungen, die in JavaScript oder Frameworks entwickelt wurden.