Handsontable で callback サンプル

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するアーキテクチャも魅力的になる。