こんなん、jQueryの勉強しはじめたときに自力で作ろうとしたことあったな。。。
１．Handsontableって何？
jQueryに依存しないExcelライクなテーブルを簡単に実装できるJavascriptライブラリです。
本家はこちら。 GitHub - handsontable
２．さっそく実装して触ってみる。
dist配下のjsとcssをセットで読み込む必要があるんだね。
CDNも公開されてるからすぐ試せるよ。
|
1 2 |
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet"> |
HTML
マジかよ。空っぽのdiv要素用意しとくだけでいいのか。
|
1 |
<div id="div_ht"></div> |
Javascript
まずは、シンプルな味付けで素材の味を楽しむ。
|
1 2 3 4 5 6 7 8 |
// tableにしたいデータを２次元配列で作る var tbldata = []; tbldata.push(['りんご',98]); tbldata.push(['みかん',138]); tbldata.push(['スイカ',980]); // div要素と合わせてデータをコンストラクタに渡すだけ。 var hndstbl1 = document.getElementById('div_hndstbl1'); new Handsontable(hndstbl1, {data: tbldata}); |
実装
な、なんかテーブルの下にメッセージでてきます。
実は、Handsontableにはライセンスがあってライセンスキーを入れてあげる必要がある。
非営利目的のフリーライセンスと、商用ライセンスね。
とりあえず、今回は使い方を試したいだけなのでーフリーライセンスで。
フリーライセンスの適用方法は、インスタンス作る時に「licenseKey: 'non-commercial-and-evaluation'」を一緒に渡すだけで良いみたい。
|
1 2 |
var hndstbl2 = document.getElementById('div_hndstbl2'); new Handsontable(hndstbl2, {data: tbldata, licenseKey: 'non-commercial-and-evaluation'}); |
フリーライセンス適用
うん。メッセージ消えたね。
セルをダウブルクリックして編集したり、Excelみたいにサクサク動く。すごい。
３．いや・・・多機能すぎる。
正直、jsライブラリだと思って舐めてた。
ドキュメント覗いたらめっちゃ多機能。
正直、今回みたいな『試してみる』スタンスだとどっから試したもんだかさっぱりだぜ。
ただ、実装はもう確認してて、実装したらテーブルの編集できるのはわかったから編集した後のデータの取り方だけチェックしとこー。
getValue()
選択中のセルデータを取得する。
Javascript
|
1 2 3 4 5 6 |
var hndstbl3 = document.getElementById('div_hndstbl3'); var objHndstb3 = new Handsontable(hndstbl3, {data: tbldata, licenseKey: 'non-commercial-and-evaluation'}); Handsontable.hooks.add('afterSelection', function() { document.getElementById('selection_state').innerText = objHndstb3.getValue(); }, objHndstb3); |
選択されたセルの値は・・・
getSourceData(row, column, row2, column2)
セルの範囲を指定してデータを取得できる。
一応、row, column, row2, column2は、optionalになってて省略してgetSourceData()ってすれば表の全データ抜ける仕様になってます。
