Блог

Я использую handsontable, и у меня возникают проблемы с последовательным запуском событий «beforeChange» и «afterChange», которые, я надеюсь, будут использоваться для фиксации обновлений в базе данных. Я использую следующий код (версия 0.16.1):

HTML:

 <div id="table"></div>
<div id="output"></div>
  

JavaScript:

 var data = [{
  id: 5,
  name: 'Sedan',
  price: 2000,
  tags: ['pink', 'purple']
}, {
  id: 6,
  name: 'Truck',
  price: 1500,
  tags: ['green', 'blue']
}, {
  id: 6,
  name: 'SUV',
  price: 1500,
  tags: null
}];

var writeMessage = function(msg) {
  var output = document.getElementById("output");
  var div = document.createElement('DIV');
  div.innerHTML = msg;
  output.insertBefore(div, output.firstChild);
  console.log(msg);
};
var tableDiv = document.getElementById("table");
this.table = new Handsontable(tableDiv, {
  data: data,
  colHeaders: ["id", "name", "price", "tags"],
  columns: [{
    data: "id"
  }, {
    data: "name"
  }, {
    data: "price"
  }, {
    data: "tags"
  }],
  beforeChange: function(changes, source) {
    writeMessage("beforeChange: "   changes   ": "   source);
  },
  afterChange: function(changes, source) {
    writeMessage("After Change fired: "   changes);
    if (!changes) {
      return;
    }
    var i, idx, key, newVal, modelID;
    for (i = 0; i < changes.length; i  ) {
      idx = changes[i][0];
      key = changes[i][1];
      newVal = changes[i][3];
      modelID = this.getDataAtRow(idx)[0];
      writeMessage("New value: "   key   ": "   newVal);
    }
  }
});
  

http://codepen.io/anon/pen/GjzrdX?editors=0010

Обработчики событий запускаются, когда я редактирую текстовые и числовые поля, а также для тегов, когда они равны нулю, но не запускаются для объектов данных с массивами тегов (например, розовый, фиолетовый; зеленый, синий). Как мне запустить события для ячеек тега без изменения структуры данных? Любой совет был бы с благодарностью принят!

Я полагаю, что вы столкнулись с ошибкой здесь при попытке поместить массив в ячейку, но я не могу найти нигде в документации handsontable или какой-либо теме в их GitHub, упоминающей эту проблему… IMO, предполагается, что массив в ячейке используется в качестве источника, а не данных, что приводит к ячейке, которую вы не можете редактировать (следовательно, события afterChange / beforeChange не запускаются). В вашем примере третья строка работает из-за значения ‘null’, которое не является массивом.

В любом случае, единственное обходное решение, которое мне удалось для вас сделать, — это изменить ваши данные после определения вашей структуры данных (с учетом ваших условий, но я настоятельно рекомендую все равно их изменять, потому что в конечном итоге вам нужно будет это сделать).

Предполагая, что ваши теги могут содержать только два значения :

 var data1 = [];
for (var i=0; i<data.length;i  ) {
  if (data[i].tags != null) {
    var temp = data[i].tags[0];
    temp = temp.concat(',');
    temp = temp.concat(data[i].tags[1]);
  } else var temp = null;
  data1.push({ id: data[i].id, name: data[i].name, price: data[i].price, tags: temp });
}
  

Если длина тегов ваших массивов может быть больше, просто выполните второй цикл, чтобы покрыть его.

Смотрите свой код здесь с реализованным этим решением

Затем вы можете использовать data1 для загрузки вашей таблицы. Если вам нужно сохранить ваши данные после модификации, вы можете использовать аналогичную функцию, чтобы преобразовать их в исходную структуру данных.