Handsontable は、ちょっと勉強すれば、Excelのように簡単な表計算も、callback 関数で書ける。
最初、Handsonテーブルの説明ページを見た時、「こんなにイベントがあるの!」と驚いたけど。。。
まずは、beforeChange を例題に簡単に書いてみる前に認識しておくべき規則性が重要!
onBeforeChange で function(changes, source){ } の引数 source と changes に渡されるものは、
セルが入力変更されると、
source → 'edit' になる。
changes → [ Array[4] ] 以下の配列になる。
changes[0][0] // 変更行
changes[0][1] // 列名
changes[0][2] // 変更前の値
changes[0][3] // 変更後の値
これは、以下のように変更入力した時に、onBeforeChange:の callBack関数で、コンソールログを
出力すると解る。
Handsontable で書いた以下の表があるとする。
callbackとして以下を付与して変更入力すると
onBeforeChange: function(changes, source){
console.log($.toJSON(changes)); // ← Google の jquery.json-2.4.min.js を使って確認
console.log(source);
}
このサンプル、”価格”と”本数”を変更入力すると自動計算して小計にセットするのに、
以下のように、コードを用意する。
サンプルなので、JSONデータが以下のように存在したとして、
var data = [
{ "price": "1100" , "mt": "7" , "sts": "8316" },
{ "price": "200" , "mt": "3" , "sts": "648" },
{ "price": "1200" , "mt": "2" , "sts": "2592" }
];
このdata を以下のコードで組む
$('#example').handsontable({
data: data,
minSpareRows: 0,
colHeaders: ["価格", "本数", "小計(税込)"],
columns: [
{ data: "price" , type: 'numeric' , format: '0,0' },
{ data: "mt" , type: 'numeric' },
{ data: "sts" , type: 'numeric' , format: '0,0' , readOnly: true },
],
contextMenu: false,
onBeforeChange: function(changes, source){
if (source==='edit'){
if (changes[0][1]==='price'){
data[changes[0][0]]['sts'] = changes[0][3] * data[changes[0][0]]['mt'] * 1.08;
}else if(changes[0][1]==='mt'){
data[changes[0][0]]['sts'] = data[changes[0][0]]['price'] * changes[0][3] * 1.08;
}
}
},
});
HTMLは、、
<div id="example" class="handsontable"></div>
サンプルなので、データをソース上で書いたが、JSONデータをサーバから取得して、変更入力の後に、
再度、JSONデータでサーバにPOSTするアーキテクチャも魅力的になる。