こんなん、jQueryの勉強しはじめたときに自力で作ろうとしたことあったな。。。
１．Handsontableって何？
jQueryに依存しないExcelライクなテーブルを簡単に実装できるJavascriptライブラリです。
本家はこちら。 GitHub - handsontable
２．さっそく実装して触ってみる。
dist配下のjsとcssをセットで読み込む必要があるんだね。
CDNも公開されてるからすぐ試せるよ。
<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要素用意しとくだけでいいのか。
<div id="div_ht"></div>
Javascript
まずは、シンプルな味付けで素材の味を楽しむ。
// 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'」を一緒に渡すだけで良いみたい。
var hndstbl2 = document.getElementById('div_hndstbl2');
new Handsontable(hndstbl2, {data: tbldata, licenseKey: 'non-commercial-and-evaluation'});
フリーライセンス適用
うん。メッセージ消えたね。
セルをダウブルクリックして編集したり、Excelみたいにサクサク動く。すごい。
３．いや・・・多機能すぎる。
正直、jsライブラリだと思って舐めてた。
ドキュメント覗いたらめっちゃ多機能。
正直、今回みたいな『試してみる』スタンスだとどっから試したもんだかさっぱりだぜ。
ただ、実装はもう確認してて、実装したらテーブルの編集できるのはわかったから編集した後のデータの取り方だけチェックしとこー。
getValue()
選択中のセルデータを取得する。
Javascript
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()ってすれば表の全データ抜ける仕様になってます。
