易于编辑的嵌套数组

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

如果你的数组 tags 的长度可以超过这个长度，只需做第二个循环来覆盖它。

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

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

易于编辑的嵌套数组

Handsontable editing nested array

javascript

arrays

handsontable

eventhandler