読者です 読者をやめる 読者になる 読者になる

Handsontable 入力バリデーションの捕捉

先日に続いて、今度は Handsontable 入力バリデーションエラーを捕捉してみる。
つまり、任意の callback を実行するのが目的である。

type: 'numeric' のセルに数字でない文字を入力するとデフォルトではセルが赤くなるが、
そのタイミングを捕捉する方法である。

イベント callback で、afterValidate というのがある。
書式は、以下のとおり。
  afterValidate (isValid: Boolean, value: Mixed, row: Number, prop: String, source: String)


サンプル、先日のに当てはめると、、、

$('#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'){
         row = changes[0][0];
         column = changes[0][1];
         changeValue = changes[0][3];
         if (column==='price'){
            data[row]['sts'] = changeValue * data[row]['mt'] * 1.08;
         }else if(column==='mt'){
            data[row]['sts'] = data[row]['price'] * changeValue * 1.08;
         }
      }
   },
   afterValidate: function (isValidvaluerowprop, source) {
      if (!isValid){
         columName = '';
         if (prop==='price'){
            columName = "'価格'列、"
         }else if(prop==='mt'){
            columName = "'本数'列、"
         }
         alert( (row+1) + ' 行目' + columName + 'の入力 "' + value + '" はエラーです' );
      }
   },
});

動作は、alert 表示、OKボタンをクリックすると、セルが赤くなる。