2016.04.26
WEB

WEBでEXCELのような表を作成！Handsontableを使ってみよう！

こんにちは、いまこです。
今回は、WEBでEXCELのような表を使うことができるjQueryのプラグイン、Handsontableについて書いていきます。
公式サイトはこちら

1 インストール
2 とりあえず表示
3 オプション
4 DBへ変更データを登録
- 4.1 使用オプション
- 4.2 参考コード
5 最後に

インストール

まずはインストールしましょう！
公式サイトでBowerを使ったインストールがおすすめされているので、ここではBowerを使ってインストールします。

bower install handsontable –save

Bowerが入っていない方は、こちらの記事が参考になるかと思われます。
または、GitHubから直接Handsontableをダウンロードしてください。

とりあえず表示

Handsontableがダウンロード出来たら、とりあえず表示してみましょう！


<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- handsontable読み込み -->
    <script type="text/javascript" src="js/handsontable.full.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/handsontable.full.min.css">
    <title>handsontable_sample</title>
</head>
<body>
    <!-- 表示する箇所 -->
    <div id="example"></div>
</body>
</html>

<script type="text/javascript">
// 表示する値
var data = [
    ["", "Ford", "Volvo", "Toyota", "Honda"],
    ["2016", 10, 11, 12, 13],
    ["2017", 20, 11, 14, 13],
    ["2018", 30, 15, 12, 13]
];

// handsontableの作成
var container = document.getElementById('example');
var hot = new Handsontable(container, {
    /* オプション */
    // 表示データ
    data: data,
    // 列ヘッダー
    rowHeaders: true,
    // 行ヘッダー
    colHeaders: true,
    // 最大行数
    maxCols: 6,
    // 最大列数
    maxRows: 5
});
</script>

デモ
ヘッダーも配列を指定することでカスタム可能です。

オプション

Handsontableには様々なオプションが備わっています。
「こんなことが出来たらな～」と思ったことは、大抵出来ます。
それくらいオプションが豊富です。
全て英語なので探すのは大変ですが…
そんな中で、個人的に便利だなと思ったオプションを紹介していきます。

Read Only

指定したcellを編集不可にします。

全てのcellをRead Only

下記オプションを追加します。


readOnly: true

デモ

指定したcellをRead Only

cellsオプションを使用します。
cellsオプションは、全てのcellをループするため、指定したcellのプロパティを変更することができます。
ここでは1行目をreadOnlyにしてみます。


cells: function(row, col, prop) {
    var cellProperties = {};
    if (col == 0) {
        cellProperties.readOnly = true;
    }
    return cellProperties;
}

デモ

コンテキストメニュー

Handsontable上でコンテキストメニュー（右クリックメニュー）を表示させることができます。

標準

下記オプションを追加することでHandsontableに備わっているコンテキストメニューが使えるようになります。


contextMenu: true

デモ

日本語化

全部英語…
大丈夫、カスタム可能です。


contextMenu: {
    items: {
        'row_above': {name: '１行挿入(上)'},
        'row_below': {name: '１行挿入(下)'},
        'hsep1': '---------',
        'col_left':  {name: '１列挿入(左)'},
        'col_right': {name: '１列挿入(右)'},
        'hsep2': '---------',
        'remove_row': {name: '行削除'},
        'remove_col': {name: '列削除'},
        'hsep3': '---------',
        'undo': {name: '戻る'},
        'redo': {name: '進む'},
        'hsep4': '---------',
        'make_read_only': {name: '読み取り専用'},
        'alignment': {name: '文字'},
    }
},

デモ
上記に記述しているメニューは、デフォルトで備わっているものなので、処理内容を記述しなくてもOKです。
いらないメニューがあったら取り除けばOKです。

メニュー自作

自作したメニューを追加したい…
大丈夫、できます。
クリックすると文字が挿入されるメニューを作ってみます。


contextMenu: {
    callback: function(key, cell, e) {
        var text = '';
        // どのメニューがクリックされたか
        switch (key) {
            case 'go':
                text = 'Go';
                break;
            case 'next':
                text = 'Next';
                break;
        }
        // textの挿入
        this.setDataAtCell(cell.start.row, cell.start.col, text);
    },
    items: {
        'go': {name: 'Go'},
        'next': {name: 'Next'},
    }
},

デモ
callback関数の第2引数(cell)でどのcellが選択されているか判定し、第1引数(key)でメニューの判定を行います。
最後にthis.setDataAtCellを使用してHandsontableに値を挿入します。
setDataAtCellはHandsontableに備わっているメソッドです。

選択行/列をハイライト

選択している行/列をわかりやすくします。


currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',

上記オプションを使用することで、クリックした行/列にクラス名を付けることができます。
後はcssで色を付けてあげると


.handsontable .currentRow {
    background-color: rgba(225, 250, 255, 1);
}
.handsontable .currentCol {
    background-color: rgba(225, 250, 255, 1);
}

デモ
わかりやすいですね！

cell1つずつにコメントを記述することができます。
コメント機能をtrueにすることで、コンテキストメニューにコメントメニューが追加されます。
※コンテキストメニューの一番下にあります


comments: true,
contextMenu: true,

デモ

イベントハンドラ

もちろん、様々なイベントに対する処理を行うこともできます。

マウス

マウスクリック時の処理です。
全く意味がないですが、とりあえず右クリックした際にcellのデータをアラートで表示するようにしてみます。


afterOnCellMouseDown:function(e, coords, TD){
    if (e.button == 2) {
        var text = this.getDataAtCell(coords.row, coords.col);
        alert(text);
    }
}

デモ

キーボード

Handsontableはキーボードで色々操作することができるのですが、
例えば、delete/back spaceを押して削除する前に確認アラートを出したい…
といった場合は


beforeKeyDown: function (e) {
    if (e.keyCode == 8 || e.keyCode == 46) {
        e.isImmediatePropagationEnabled = window.confirm('削除しますか？');
        e.preventDefault();
    }
},

デモ
beforeKeyDownオプションを使用することで、キーボードを押した後の処理を行う前に、こちらで記述した処理を実行できます。
そこで、キーボードの種類を判定し、delete/back spaceの場合のみ確認アラートを出すようにしています。

DBへ変更データを登録

値を変えても保存されなければ全く意味ありませんね！！
頑張って編集したのに…と、悲しくなってしまいますね！！
そこでDBへ変更データを登録する方法について書いていきます。

使用オプション

ここで登場するのが、afterChangeオプションです。
このオプションは、cellの編集が完了した際に呼ばれるオプションです。
つまりafterChangeオプションを使用して、変更データをajaxでphp等に送信すればいいということです。

参考コード

※コピペしても動きません
※1つのcellデータを編集する前提です


afterChange: function (change, source) {
    // 初回アクセス時
    if (source === 'loadData') {
        return;
    }            
    // データに変更があった場合
    if (change[0][2] != change[0][3]) {
        // 変更データを格納
        var data = {
            'row' : change[0][0],
            'col' : change[0][1],
            'data': change[0][3],
        }
        $.ajax({
            url: "hoge.php",
            method: "POST",
            data: data
        }).done(function (data) {
            /* 成功処理 */
        }).fail(function(jqXHR, textStatus, errorThrown){
            /* 失敗処理 */
        });
    }
}

第2引数のsourceで初回アクセス時は処理させないようreturnします。
第1引数のchangeを使用し、前回のデータと今回のデータを比較させ、
変更がない場合はajaxを行わせません。
changeは以下が格納されています。