こんにちは、いまこです。
今回は、WEBでEXCELのような表を使うことができるjQueryのプラグイン、Handsontableについて書いていきます。
公式サイトはこちら
目次
インストール
まずはインストールしましょう!
公式サイトでBowerを使ったインストールがおすすめされているので、ここではBowerを使ってインストールします。
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: '1行挿入(上)'},
'row_below': {name: '1行挿入(下)'},
'hsep1': '---------',
'col_left': {name: '1列挿入(左)'},
'col_right': {name: '1列挿入(右)'},
'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は以下が格納されています。
- row(change[0][0])
- col(change[0][1])
- 変更前のデータ(change[0][2])
- 変更後のデータ(change[0][3])
複数データを編集すると、change[1]、change[2]・・・と増えていきます。
最後に
今回触れたのはHandsontableのごくごく一部です。
まだまだ沢山の機能があるので、興味を持った方は公式サイトをご覧ください。