[JSライブラリ]handsontableの使い方を試す。

こんなん、jQueryの勉強しはじめたときに自力で作ろうとしたことあったな。。。

 

1.Handsontableって何?

jQueryに依存しないExcelライクなテーブルを簡単に実装できるJavascriptライブラリです。

 

本家はこちら。 GitHub – handsontable

 

2.さっそく実装して触ってみる。

dist配下のjsとcssをセットで読み込む必要があるんだね。

CDNも公開されてるからすぐ試せるよ。

HTML

マジかよ。空っぽのdiv要素用意しとくだけでいいのか。

Javascript

まずは、シンプルな味付けで素材の味を楽しむ。

実装

な、なんかテーブルの下にメッセージでてきます。

 

実は、Handsontableにはライセンスがあってライセンスキーを入れてあげる必要がある。

非営利目的のフリーライセンスと、商用ライセンスね。

 

とりあえず、今回は使い方を試したいだけなのでーフリーライセンスで。

フリーライセンスの適用方法は、インスタンス作る時に「licenseKey: ‘non-commercial-and-evaluation’」を一緒に渡すだけで良いみたい。

フリーライセンス適用

うん。メッセージ消えたね。

セルをダウブルクリックして編集したり、Excelみたいにサクサク動く。すごい。

 

3.いや・・・多機能すぎる。

正直、jsライブラリだと思って舐めてた。

ドキュメント覗いたらめっちゃ多機能。

正直、今回みたいな『試してみる』スタンスだとどっから試したもんだかさっぱりだぜ。

ただ、実装はもう確認してて、実装したらテーブルの編集できるのはわかったから編集した後のデータの取り方だけチェックしとこー。

 

getValue()

選択中のセルデータを取得する。

Javascript

選択されたセルの値は・・・

 

getSourceData(row, column, row2, column2)

セルの範囲を指定してデータを取得できる。

一応、row, column, row2, column2は、optionalになってて省略してgetSourceData()ってすれば表の全データ抜ける仕様になってます。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です