Handsontable: Einfache Tabellenbearbeitung mit jQuery und HTML

Recht häufig benötigt man innerhalb einer Website eine Tabelle zur Visualisierung von Werten. Schön wäre es zuweilen, wenn diese nicht bloß statisch wäre, sondern dynamisch um Inhalte ergänzt, respektive geändert werden könnte. Das jQuery-Plugin Handsontable des Entwicklers Marcin Warpechowski bietet genau das auf sehr einfache Art und Weise an.

Handsontable: Schnell mal eine Tabelle bauen

Handsontable trägt die Einfachheit der Lösung schon im Namen. Warpechowski möchte eine schnelle und unkomplizierte, gleichzeitig aber ebenso unkomplexe Möglichkeit zur Implementation von Tabellen in Websites bieten. Dabei soll deren Verhalten und Aussehen optisch an Excel erinnern, sowie dessen Verhaltensweisen nachempfinden. In der Tat habe ich bislang noch keine einfachere Lösung als Handsontable gesehen. Komplexere, umfangreichere gibt es, aber keine einfachere.


Handsontable mit Kontextmenü

Handsontable steht unter der MIT-Lizenz zur kostenfreien Nutzung auf GitHub zum Download zur Verfügung. Es setzt jQuery voraus und bringt sowohl dieses, als auch alle anderen abhängigen Scripte im eigenen Download-Zip gleich mit. Die Implementation ist schnell erledigt. In der Basiskonfiguration bestückt man den Head-Bereich mit folgenden Skripten:

1
2
3
<script src="jquery.handsontable.js"></script>
<link rel="stylesheet" media="screen" href="lib/jQuery-contextMenu/jquery.contextMenu.css">
<link rel="stylesheet" media="screen" href="jquery.handsontable.css">

Will man erweiterte Funktionalität, nämlich das Autocompletefeature oder ein Kontextmenü nutzen, müssen folgende weitere Skripte geladen werden:

1
2
3
4
<script src="lib/bootstrap-typeahead.js"></script><!-- if you need the autocomplete feature -->
<script src="lib/jquery.autoresize.js"></script><!-- if you need the autoexpanding textarea -->
<script src="lib/jQuery-contextMenu/jquery.contextMenu.js"></script><!-- if you need the context menu -->
<script src="lib/jQuery-contextMenu/jquery.ui.position.js"></script><!-- if you need the context menu -->

Ist das erledigt, lässt man Handsontable auf einen leeren Div-Container los:

1
2
3
4
5
6
7
<div id="dataTable" class="dataTable"></div>
<script>
  $("#dataTable").handsontable({
    rows: 6,
    cols: 8
});
</script>

Will man die Tabelle mit Inhalten vorbelegen, sieht der Aufruf beispielsweise so aus:

1
2
3
4
5
6
7
8
9
<script>
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
  $("#dataTable").handsontable("loadData", data);
</script>

Eine sich dynamisch erweiternde Tabelle würde mit folgendem Code definiert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="example1grid" class="dataTable"></div>
 
<script>
  $("#example1grid").handsontable({
    rows: 5,
    cols: 5,
    minSpareCols: 1, //always keep at least 1 spare row at the right
    minSpareRows: 1, //always keep at least 1 spare row at the bottom
    contextMenu: true
  });
 
  var data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ];
 
  $("#example1grid").handsontable("loadData", data);
</script>

Handsontable: Auch komplexere Funktionalitäten sind umsetzbar

Wem die einfachen Varianten nicht reichen, der kann unter Verwendung der mannigfaltigen Funktionalitäten des Plugins Zeilen oder Spalten als Legende auszeichnen, ein Autocomplete-Feature mit vorpopulierter Auswahlliste einbauen, lange Tabellen scrollbar machen, ein Kontextmenü mit der Möglichkeit der Tabellenmanipulation anbieten oder Werte per Drag von einer Zelle in beliebig viele weitere schreiben lassen. Auch die Implementation von Schaltflächen, Formatierungen nach bestimmten Wertebedingungen oder das Vorbelegen ganzer Tabellen mit Werten anhand von Templates beherrscht Handsontable.

Warpechowski unterhält eine Demo-Seite, die live und mit Code die jeweiligen Möglichkeiten zeigt. Die Dokumentation der einzelnen Funktionen ist vollständig und verständlich, sodass der Einstieg in Handsontable Developern mit Affinität zu jQuery überhaupt keine Probleme bereiten sollte.

Fazit: Handsontable dürfte für die meisten Anforderungen an Tabellen in handelsüblichen Websites ausreichend sein. Wer mehr braucht, greift zu größeren, aber auch schwieriger zu handhabenden Lösungen.

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
eshepht
Gast
eshepht
4 Jahre 2 Monate her

Hallo,
eine weitere sehr schöne und erweiterbare Variante ist http://datatables.net.
Mit Datatable hat man zusätzlich noch die Möglichkeit zu filtern. Da man doch schon viele Datensätze hat.

Viel Spass dabei…

Rene
Gast
4 Jahre 2 Monate her

sher interessantes Tool, welche ich im Microsoft Visual Web Developer 2010 ausprobieren wollte. Leider bekomme ich bei

$(„#dataTable“).handsontable({
rows: 6,
cols: 8
});
<

Die Felermeldung : Laufzeitfehler in Microsoft JScript: Der Wert der Eigenschaft "$" ist Null oder undefiniert, kein Function-Objekt

Gibt es eventuell einen Tipp für mich.
Beschäftige mich erst seit kurzem mit ASP.net und hatte vorher auch noch nicht viel erfahrung

Rene
Gast
4 Jahre 2 Monate her

Hallo Dieter,

ich hatte die Verweise falsch gesetzt:
Mit

Hats geklappt
Nach dem vergeigten Halbfinale wenigstens etwas.

Gruß Rene

Dieter Petereit
Gast
4 Jahre 2 Monate her

Schön, dass Du´s hinbekommen hast! Anders als die deutsche Elf…

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen