WEB上で表(table)をExcelっぽく使えるjQueryプラグイン「Handsontable」

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

handsontable2

WEBアプリケーションを作っていると、インターフェースはWEBアプリがいいんだけど、操作性はEXCELなんかの方が使いやすい!ってよくありますよね。

たとえば、フォームで格子状に「input type=”text”」を配置しても、すぐ下のテキストボックスに移動したいのに、タブキーだと何回も押さなければならなかったり、下矢印キーでは移動できなかったり・・・

そんな時に使えるのが「Handsontable」です。
紹介されているサイトはいくつかあったのですが、使い方が説明されているサイトが見当たらなかったので苦労しました・・・
なので、簡単な使い方をメモ代わりに書いておきたいと思います。

まず、Githubから「Handsontable」をDLします。ちなみに、公式サイトはこちら。

単純に使うだけなら結構カンタンで、公式サイトにもあります。

DLしたファイルから「jquery.handsontable.full.css」と「jquery.handsontable.full.js」を必要な場所に保存し、使いたいページで読み込みます。

それから、Handsontableで表示したい場所に

のように、idを指定した空の要素を用意しておきます。

そのあとで、データを用意します。

このようにJSON形式で作成します。

そして、レンダリングします。

これで、データ通りの表ができあがります。

handsontable3

取り得るオプションがいくつかあるようなのですが、日本語じゃないので読むのが面倒ですw
適当に訳してくれる方募集。

これだと静的なデータを表のようにしか扱えないので、とりあえず、これをフォームで扱える様にちょろっといじってみます。
それは次回ということで・・・

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。




コメントを残す

%d人のブロガーが「いいね」をつけました。