Handsontable 编辑嵌套数组

Posted 2023-03-22

【中文标题】Handsontable 编辑嵌套数组

【英文标题】：Handsontable editing nested array

【发布时间】：2017-03-05 14:29:53

【问题描述】：

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

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

【参考方案1】：

我相信您在尝试将数组放入单元格时遇到了一个错误，但我在可操作文档中的任何地方或他们的 GitHub 中提到此问题的任何线程中都找不到... IMO，将数组放入单元格假设用作源而不是数据，这会导致您无法编辑的单元格（因此未触发 afterChange/beforeChange 事件）。在您的示例中，第三行正在工作，因为“null”值不是数组。

无论如何，我设法为您做的唯一解决方法是在您定义数据结构之后修改您的数据（为了尊重您的条件，但我强烈建议您无论如何都要修改它们，因为您最终需要这样做）。

假设你的 tags 只能包含两个值：

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 是一个了不起的资源，这是一个次要的解决方法。感谢您抽出宝贵时间对此进行调查。