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

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

Answer 1

我相信你在尝试将一个数组放入Cell时遇到了一个错误，但是我无法在手中的文档或GitHub中的任何线程中找到这个问题... IMO，将一个数组放入一个Cell是假设用作Source而不是Data，这会导致您无法编辑的单元格（因此事件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加载表格。如果需要在修改后保存数据，可以使用类似的功能将其反转为原始数据结构。

Handsontable编辑嵌套数组

1 个答案: