Excelみたいな表を作れるjQueryプラグインHandsontableを使ってみた。

Javascript Excel

概要

画面上にExcelみたいななテーブルを作りたかったのでHandsontableを使ってみたのでメモ。

Handsontableとは、Excelみたいなテーブルが作れちゃうjQueryプラグイン。

  • Excelからのコピペ、セルの右下をドラッグでコピペ、行削除、セルの追加、UNDO、REDOとか色々できる。
    • Validationとかもできるみたい。
  • 色々できるけど設定で色々変更可能なのが嬉しい。
  • 色々変更可能だと設定がわからなくてうんざりしそうだけど、Wikiが見やすい上に充実してて私みたいなアンチ英語みたいな人でも細かく設定可能。
  • GitHubで☆3000↑と人気もあるみたい

導入方法

導入は簡単。

  1. jQuery、Handsontableのjsとcssを読み込む
  2. オプション設定
  3. データ設定
  4. 表示

Sampleページ（消えていたら↓をコピペしてください）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Handsontable Sample</title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/jquery-handsontable/0.10.2/jquery.handsontable.full.css" rel="stylesheet" type="text/css"/>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-handsontable/0.10.2/jquery.handsontable.full.min.js"></script>
  <script type="text/javascript">
    $(
      function() {
        var data = [
          ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
          ["2009", 0, 2941, 4303, 354, 5814],
          ["2010", 5, 2905, 2867, 412, 5284],
          ["2011", 4, 2517, 4822, 552, 6127],
          ["2012", 2, 2422, 5399, 776, 4151]
        ];
        $('#example').handsontable({
          data: data,
          minSpareRows: 1,
          colHeaders: true,
          contextMenu: true
        });
      }
    );
  </script>
</head>
<body>
  <div id="example"></div>
</body>
</html>

メソッドの使い方。

↑で書いたメソッドページの一番上に書いてありますが、読み飛ばして困ったのでメモ。

// 指定行のデータを取得（配列）
$('#example').handsontable('getDataAtRow',0);

こんな感じで、handsontableの引数として文字列で指定します。メソッドの引数は続けて設定。

ちょっと困ったこと

  • 日本語で値を設定したら初期表示時のカラムサイズがうまく設定されない。
    • 一度入力するといい感じに設定されるんですが。。。
    • 明示的にカラムサイズ調節行えそうですがみつからなかったので私はcolWidthsオプションを指定して、サイズを固定しちゃいました。
colWidths: [80, 120, 80, 80, 80, 80, 80, 80],