はしくれSEめも

SEに必要情報をめも程度に残していこうと思っています。

【Handsontable】afterChangeよりもbeforeChange

handsontable

入力したデータを加工や変換したり、入力をキャンセルしたい場合があると思います。
Handsontable(ハンズオンテーブル)では、おそらくbeforeChangeafterChange
イベントを使用すると思います。
私的にはbeforeChangeをおすすめします。

理由:afterChangeの場合、2回描画処理が行われてしまうからです。遅いです。
beforeChangeは、1回なので早いです。

それでは、beforeChangeの使い方をご紹介します。

入力データの加工や変換

以下の処理は、入力した値を必ず「OK」に書き変える処理です。 changesを書き変えることで、入力値の加工や変換が可能です。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,

    beforeChange: function(changes, source) {
      if (source == 'edit' ||
          source == 'CopyPaste.paste' ||
          source == 'Autofill.fill') {
        for (var i = 0; i < changes.length; i++) {
          var row = changes[i][0];
          var col = changes[i][1];
          var oldValue = changes[i][2];
          var newValue = changes[i][3];

          console.log('row:' + row);
          console.log('col:' + col);
          console.log('oldValue:' + oldValue);
          console.log('newValue:' + newValue);

          // 入力値の変換
          changes[i][3] = 'OK';
        }
      }
    }
  });
});

changes:[row, col, oldVal, newVal]

  1. row:変更した行
  2. col:変更した列
  3. oldVal:変更前の値
  4. newVal:変更後の値

source:以下のリンクを参照ください。

coogi-memo.hatenablog.com

入力データキャンセル

入力したデータをキャンセルすることも容易にできます。
以下の処理は、'edit'以外の場合に入力したデータをキャンセルする処理です。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,

    beforeChange: function(changes, source) {
      if (source != 'edit') {
        return false;
      }
    }
  });
});

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com