Handsontable に配置するボタンのサンプル

先日書いた、
oboe2uran.hatenablog.com
このサンプル、押下したボタンの特定方法が良くない！
Class属性ではなくて、ちゃんとボタンタグに割り当てる id で、特定させるべきで、
HTMLRenderer で生成時に、列番号を付与したIDにしておくべきだ。

var hot = new Handsontable(document.getElementById("table"), {
   data: data,
   columns:[
      {  data:'A', type: 'text' },
      {  data:'B', type: 'text' },
      {  data:'C',
         readOnly: true,
         width: 100,
         renderer: function(instance, td, row, col, prop, value, cellProperties){
            var button = $('<button id="btn_' + col + '">');
            button.html("実行");
            $(td).addClass("htCenter");
            $(td).addClass("htMiddle");
            $(td).empty().append(button);
            td.style.background = "#f0f0f0";
         },
      },
   ],
   colHeaders: ["A", "B", "C" ],
   dataSchema: { A:null, B:null, C:null },
   copyPaste: true,
   autoColumnSize: true,
   manualColumnResize: true,
   maxRows: 10,
   maxCols: 7,
   afterOnCellMouseDown: function(event, cords, TD) {
      if (event.toElement.tagName=="BUTTON"){
         if ($(event.toElement).prop("id").match(/^btn_[0-9]+$/)){
            console.log(event.toElement);
            console.log("# row = "+ cords.row + "  col = " + cords.col);
            var ary = hot.getDataAtRow(cords.row);
            console.log(ary);
         }
      }
   },
   contextMenu: {
      items:{
         'row_above': { name: '１行挿入' },
         'remove_row': { name: '１行削除', disabled: function(){ return hot.countRows() < 2; }  },
         "hsep": "---------",
         'undo': { name: '戻る' },
      },
   },
});

$(event.toElement).prop("id") で取得した id 値を正規表現で確認すれば良い。
⇒ .match(/^btn_[0-9]+$/)