Javascript 可手持编辑嵌套数组

我使用的是handsontable，很难让“beforeChange”和“afterChange”事件一致地触发，我希望用它向数据库提交更新。我正在使用以下代码（版本0.16.1）：

HTML:

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);
    }
  }
});

var数据=[{
id:5，
名称：'轿车'，
价格：2000，
标签：[‘粉色’、‘紫色’]
}, {
id:6，
名称：“卡车”，
价格：1500，
标签：[“绿色”、“蓝色”]
}, {
id:6，
名称：“SUV”，
价格：1500，
标签：空
}];
var writeMessage=函数（msg）{
var output=document.getElementById（“输出”）；
var div=document.createElement（'div'）；
div.innerHTML=msg；
output.insertBefore（div，output.firstChild）；
控制台日志（msg）；
};
var tableDiv=document.getElementById（“表”）；
this.table=新的Handsontable（tableDiv{
数据：数据，
colHeaders:[“id”、“name”、“price”、“tags”]，
栏目：[{
数据：“id”
}, {
数据：“名称”
}, {
数据：“价格”
}, {
数据：“标签”
}],
变更前：函数（变更，来源）{
writeMessage（“变更前：“+changes+”：“+source”）；
},
变更后：功能（变更，来源）{
writeMessage（“触发更改后：+changes”）；
如果（！更改）{
返回；
}
变量i、idx、key、newVal、modelID；
对于（i=0；i

---

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

我相信您在尝试将数组放入单元格时遇到了一个错误，但我在handsontable文档中找不到任何地方，也找不到GitHub中提到此问题的任何线程。。。在我看来，将数组放入单元格被认为是用作源而不是数据，这会导致单元格无法编辑（因此不会触发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 });
}

var data1=[]；
对于（var i=0；我感谢你。我希望避免额外的循环来处理标记的数组到字符串的转换，但同意你的观点，这似乎是唯一的方法，当然不是一个破坏交易的方法。Handsontable是一个惊人的资源，这是一个小的解决方法。我感谢你花时间研究这个问题。
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 });
}