javascript - 手动编辑嵌套数组

Question

我正在使用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

当我编辑文本和数字字段以及标签为空时，事件处理程序会触发，但对于具有标签数组的数据对象(例如粉色、紫色；绿色、蓝色)不会触发。如何在不修改数据结构的情况下触发标签单元的事件？任何建议将不胜感激!

Answer 1

我相信您在尝试将数组放入单元格时遇到了一个错误，但我在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 });
}

如果数组标签的长度可能超过这个长度，只需执行第二个循环即可覆盖它。

查看您的代码 here实现此解决方案

然后您可以使用 data1 加载您的表。如果修改后需要保存数据，可以使用类似的函数将其反转为原始数据结构。