JavaScriptでExcelライクなグリッドを使う(Handsontable)
JavaScriptでExcelライクなグリッドを使用するための
ライブラリである、Handsontableについて書いていきます。
本ブログの内容です。
Handsontableのダウンロード
以下のページからソースコードをダウンロードしてください。使用するファイルは、distフォルダの中に入っています。
github.com
ライセンス
MITライセンスです。github.com
サンプルコード
サンプルコードにjQueryを使用していますが、HandsontableがjQueryに依存しているわけではないです。
HTML
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/handsontable.full.min.css" /> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/handsontable.full.min.js"></script> <script src="js/index.js"></script> </head> <body> <div id="grid"></div> </body> </html>
$(function() { var data = [ ['佐藤', 28], ['鈴木', 19], ['田中', 25] ]; var grid = document.getElementById('grid'); new Handsontable(grid, { data: data }); });
使い方
公式ドキュメントと、有志の方が書かれた日本語情報のページを紹介します。公式ドキュメント
Handsontable - Tutorial: Introduction日本語情報
Handsontable 使い方メモ1(基本)Handsontable 使い方メモ2(グリッドのオプション)
Handsontable 使い方メモ3(カラム・セルオプション)
Handsontable 使い方メモ4(メソッド)