Handsontable Implementation

gistfile1.txt

$(document).ready(function() {

  var handson_table_data = []

  var container = $("#edit-metrics-handson-table")

  var renderResponse = function (instance, td, row, col, prop, value, cellProperties) {

    if (row == 0 || col == 0) {
      cellProperties.readOnly = true;
    }

    new_args = $.extend(true, [], arguments)
    if( value != null && value.constructor == Object ) {
      new_args[5] = arguments[5].value
      handson_table_data[row][col] = arguments[5].value
      $(td).attr("id", arguments[5].id);
    }

    Handsontable.TextCell.renderer.apply(this, new_args);
    return td;
  };

  $(container).handsontable({
    cells: function(row, col, prop) {
      this.renderer = renderResponse
    },
    afterChange: function (change, source) {
      console.log(change)
      console.log(source)

      if (source === 'loadData') {
        return; //don't save this change
      } else {
        if (change != null && change.length > 0) {
          var send_data = [];
          for (var i = 0; i < change.length; i++) {
            var curr_change = change[i];

            $td = $(table.getCell(curr_change[0][0], curr_change[0][1]))
            var cell_id = $td.attr("id");
          
            if (cell_id != null && cell_id != "") {
              send_data
            }
          }
        }
      }
    }
  });
  
  handson_table_data = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    [2008, { id: "id1", value: "10"}, 11, 12, 13],
    [2009, { id: "id2", value: "20"}, 11, 14, 13],
    [2010, { id: "id2", value: "30"}, 15, 12, 13]
  ];

  var table = $(container).data("handsontable")

  table.loadData(handson_table_data);

});