Webdesign

Handsontable: Einfache Tabellenbearbeitung mit jQuery und HTML

26. Juni 2012
von

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 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+.

4 Kommentare zu „Handsontable: Einfache Tabellenbearbeitung mit jQuery und HTML
  1. eshepht am 26. Juni 2012 um 15:12

    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…

  2. Rene am 28. Juni 2012 um 21:16

    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 am 28. Juni 2012 um 22:44

      Hallo Dieter,

      ich hatte die Verweise falsch gesetzt:
      Mit

      Hats geklappt
      Nach dem vergeigten Halbfinale wenigstens etwas.

      Gruß Rene

      • Dieter Petereit am 29. Juni 2012 um 09:18

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

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!