「Handsontable」でExcelライクにデータ編集・その1 | GROUP DEV BLOG

2017.01.05

プログラミング

「Handsontable」でExcelライクにデータ編集・その1

こんにちは、ESです。

以前このブログでjqGridのご紹介をしています(「【Web】【javascript】「jqGrid」で少しリッチなテーブルを作成する基礎編」、「【Web】【javascript】「jqGrid」で少しリッチなテーブルを作成する応用編」)が、今回はWebページ上でExcelのように編集ができちゃうグリッド「Handsontable」をご紹介します、の第1回です。

Handsontable公式サイト

jqGridはその名のとおりjQueryが必要ですが、Handsontableにはいりません。
最低限、2ファイルだけでOKです。

まずGithubからソースをダウンロードします。
2017年1月現在での最新バージョンは0.29.2です。「Downloads」から圧縮ファイルをダウンロードして、適当なフォルダに解凍しましょう。
解凍したフォルダから作業フォルダへ必要ファイルをコピーします。

作業フォルダの構成はこのようにします。

|-index.html
|-js/
| |-handsontable.full.js
| |-script.js
|-css/
| |-handsontable.css

|-index.html

|-js/

| |-handsontable.full.js

| |-script.js

|-css/

| |-handsontable.css

このうち、index.htmlとscript.jsを作成していきます。

まずはごく簡単に、項目ベタ書きから。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Handsontable Sample</title>
        <link rel="stylesheet" href="css/handsontable.css" />
    </head>
    <body>
        <div id="grid"></div>

        <script src="js/handsontable.full.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Handsontable Sample</title>

</head>

<body>

</body>

</html>

script.js

var data = [
    [1, 'banana', 100],
    [2, 'apple', 50],
    [3, 'orange', 30]
];

var grid = document.getElementById('grid');

new Handsontable(grid, {data: data,
                        colHeaders: ['id', '名前', '価格']}
                );

var data = [

[1, 'banana', 100],

[2, 'apple', 50],

[3, 'orange', 30]

];

var grid = document.getElementById('grid');

new Handsontable(grid, {data: data,

colHeaders: ['id', '名前', '価格']}

);

index.htmlでscriptタグがヘッダの中にないのが気になる方は、jQueryを使って$(document).readyでどうぞ。

実行すると、こんな感じになります。

Handsontableの場合、こんなふうにグリッド上で直接編集を行うことができます。

行番号をつけたいなら、こう。

script.js(一部)

new Handsontable(grid, {data: data,
                        colHeaders: ['id', '名前', '価格'],
                        rowHeaders: true}
                );

new Handsontable(grid, {data: data,

colHeaders: ['id', '名前', '価格'],

rowHeaders: true}

);

するとこうなります。

IDが編集されるのは困るから、読み取り専用にしちゃいましょう。

ちなみにこの状態だと見た目は変わりません。クリックしても編集できないだけです。

script.js(一部)

new Handsontable(grid, {data: data,
                        colHeaders: ['id', '名前', '価格'],
                        rowHeaders: true,
                        columns: [{"readOnly": true}, 
                                  {"readOnly": false}, 
                                  {"readOnly": false}
                        ]}
                );

new Handsontable(grid, {data: data,

colHeaders: ['id', '名前', '価格'],

rowHeaders: true,

columns: [{"readOnly": true},

{"readOnly": false},

{"readOnly": false}

]}

);

価格に数値以外が入力されるのはまずいよね、ということで。

script.js(一部)

new Handsontable(grid, {data: data,
                        colHeaders: ['id', '名前', '価格'],
                        rowHeaders: true,
                        columns: [{"readOnly": true}, 
                                  {"readOnly": false}, 
                                  {"readOnly": false, type: "numeric"}
                        ]}
                );

new Handsontable(grid, {data: data,

colHeaders: ['id', '名前', '価格'],

rowHeaders: true,

columns: [{"readOnly": true},

{"readOnly": false},

{"readOnly": false, type: "numeric"}

]}

);

自動でバリデーションチェックをしてくれます。さらに数値は自動的に右寄せ表示になります。

追加入力もできなきゃ。

script.js(一部)

new Handsontable(grid, {data: data,
                        colHeaders: ['id', '名前', '価格'],
                        rowHeaders: true,
                        columns: [{"readOnly": false, type: "numeric"}, 
                                  {"readOnly": false}, 
                                  {"readOnly": false, type: "numeric"}
                        ],
                        minSpareRows: 1}
                );

new Handsontable(grid, {data: data,

colHeaders: ['id', '名前', '価格'],

rowHeaders: true,

columns: [{"readOnly": false, type: "numeric"},

{"readOnly": false},

{"readOnly": false, type: "numeric"}

minSpareRows: 1}

);

新しい行のIDを入力したいのでIDの読み取り専用は削除して、代わりに数値用バリデーションチェックを入れました。
一番下に「minSpareRows」で指定した数だけ空行が表示されます。空行に何か入力されると、さらに空行ができます。
こんな感じ。

果物をアルファベット順に並べたいこともあったり……

script.js(一部)

new Handsontable(grid, {data: data,
                        colHeaders: ['id', '名前', '価格'],
                        rowHeaders: true,
                        columns: [{"readOnly": false, type: "numeric"}, 
                                  {"readOnly": false}, 
                                  {"readOnly": false, type: "numeric"}
                        ],
                        minSpareRows: 1,
                        columnSorting: true,
                        sortIndicator: true}
                );

new Handsontable(grid, {data: data,

colHeaders: ['id', '名前', '価格'],

rowHeaders: true,

columns: [{"readOnly": false, type: "numeric"},

{"readOnly": false},

{"readOnly": false, type: "numeric"}

minSpareRows: 1,

columnSorting: true,

sortIndicator: true}

);

「columSorting」をtrueにすると、該当列のヘッダをクリックでソートが可能になります。どの列でもできます。
1回クリックで昇順、2回クリックで降順、3回でソート解除です。
「sortIndicator」をtrueにすると、ソート時に昇順・降順を示す三角が該当列のヘッダに表示されます。

三角が表示されるとヘッダがせせこましいので広げましょう。

script.js(一部)

new Handsontable(grid, {data: data,
                        colHeaders: ['id', '名前', '価格'],
                        rowHeaders: true,
                        columns: [{"readOnly": false, type: "numeric"}, 
                                  {"readOnly": false}, 
                                  {"readOnly": false, type: "numeric"}
                        ],
                        minSpareRows: 1,
                        columnSorting: true,
                        sortIndicator: true,
                        colWidths: 100}
                );

new Handsontable(grid, {data: data,

colHeaders: ['id', '名前', '価格'],

rowHeaders: true,

columns: [{"readOnly": false, type: "numeric"},

{"readOnly": false},

{"readOnly": false, type: "numeric"}

minSpareRows: 1,

columnSorting: true,

sortIndicator: true,

colWidths: 100}

);

全列一気に広がりました。

列ごとに設定したいなら、こう。

script.js(一部)

new Handsontable(grid, {data: data,
                        colHeaders: ['id', '名前', '価格'],
                        rowHeaders: true,
                        columns: [{"readOnly": false, type: "numeric"}, 
                                  {"readOnly": false}, 
                                  {"readOnly": false, type: "numeric"}
                        ],
                        minSpareRows: 1,
                        columnSorting: true,
                        sortIndicator: true,
                        colWidths: [50, 120, 80]}
                );