WEBアプリケーションを作っていると、インターフェースはWEBアプリがいいんだけど、操作性はEXCELなんかの方が使いやすい！ってよくありますよね。
たとえば、フォームで格子状に「input type=”text”」を配置しても、すぐ下のテキストボックスに移動したいのに、タブキーだと何回も押さなければならなかったり、下矢印キーでは移動できなかったり・・・
そんな時に使えるのが「Handsontable」です。
紹介されているサイトはいくつかあったのですが、使い方が説明されているサイトが見当たらなかったので苦労しました・・・
なので、簡単な使い方をメモ代わりに書いておきたいと思います。
まず、Githubから「Handsontable」をDLします。ちなみに、公式サイトはこちら。
単純に使うだけなら結構カンタンで、公式サイトにもあります。
DLしたファイルから「jquery.handsontable.full.css」と「jquery.handsontable.full.js」を必要な場所に保存し、使いたいページで読み込みます。
<link href="css/jquery.handsontable.full.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.handsontable.full.js"></script>
それから、Handsontableで表示したい場所に
<div id="excel"></div>
のように、idを指定した空の要素を用意しておきます。
そのあとで、データを用意します。
var data = [
{id: 1, name: "Ted", isActive: true, color: "orange"},
{id: 2, name: "John", isActive: false, color: "black"},
{id: 3, name: "Al", isActive: true, color: "red"},
{id: 4, name: "Ben", isActive: false, color: "blue"}
];
このようにJSON形式で作成します。
そして、レンダリングします。
var $container = $("#excel");
$container.handsontable({
data: data,
colHeaders: true,
rowHeaders: true
});
これで、データ通りの表ができあがります。
取り得るオプションがいくつかあるようなのですが、日本語じゃないので読むのが面倒ですｗ
適当に訳してくれる方募集。
これだと静的なデータを表のようにしか扱えないので、とりあえず、これをフォームで扱える様にちょろっといじってみます。
それは次回ということで・・・