ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

JavaScriptでExcelライクなグリッドを使う(Handsontable)

JavaScript

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>

JavaScript

$(function() {
    var data = [
        ['佐藤', 28],
        ['鈴木', 19],
        ['田中', 25]
      ];
      
    var grid = document.getElementById('grid');
    
    new Handsontable(grid, 
    {
        data: data
    });
});

使い方

公式ドキュメントと、有志の方が書かれた日本語情報のページを紹介します。

公式ドキュメント

Handsontable - Tutorial: Introduction

日本語情報

Handsontable 使い方メモ１（基本）
Handsontable 使い方メモ２（グリッドのオプション）
Handsontable 使い方メモ３（カラム・セルオプション）
Handsontable 使い方メモ４（メソッド）