Handsontable - afterChangeEvent 如何检测何时删除或添加整行

Posted 2023-03-22

【中文标题】Handsontable - afterChangeEvent 如何检测何时删除或添加整行

【英文标题】：Handsontable - afterChangeEvent how to detect when a whole row is deleted or added

【发布时间】：2017-11-17 09:52:15

【问题描述】：

我创建了一个自定义函数，该函数根据以下 Handsontable 链接中的说明在 afterChange 单元格事件上执行。

https://docs.handsontable.com/0.15.0-beta3/Hooks.html

而且我可以根据每个已更改的单元格执行操作。按照以下代码。

var hot = new Handsontable(container, 
    data: data(),
    minSpareRows: 1,
    rowHeaders: true,
    colHeaders: ['some array of headers']
    afterChange: function (changes, source) 
          onChangeHandler(this, changes, source);
        
);

var onChangeHandler = function (hot_instance, changes, source) 
      var changesLength;
      var changePayloadtoServer = [];
      if (changes != null) 
        changesLength = changes.length;
       else 
        changesLength = 0;
      
      for (var i = 0; i < changesLength; i++) 
        var row = changes[i][0],
            col = changes[i][1],
            oldVal = changes[i][2],
            newVal = changes[i][3],

        var trigger = false

        // How to I determine that a whole row has been deleted/added here?
        // trigger = some check that a whole row has been deleted/added.

        if (trigger == true) 
            // Perform action on row deletion
          // i.e. CASCADE DELETE query on database

          // Perform action on row addition
          // i.e. INSERT INTO query on database
         else 
          // Perform normal on cell change
          // i.e. UPDATE query on database

        

      

但是，我不知道如何确定整行是否已被删除或添加到更改中。鉴于此 afterChange 事件中提供的更改数据格式如下：

[
changedRowNumber, chnagedColumnName, oldCellValue, newCellValue
, changedRowNumber, chnagedColumnName, oldCellValue, newCellValue
, changedRowNumber, chnagedColumnName, oldCellValue, newCellValue
, changedRowNumber, chnagedColumnName, oldCellValue, newCellValue
, ... etc.
]

我创建了一个示例小提琴。请参阅下面的链接。

https://jsfiddle.net/JoshAdams/go898kq6/

有谁知道我如何检测添加或删除一整行的时间？

【参考方案1】：

您正在寻找的是文档中定义的另外两个事件：

afterCreateRow afterRemoveRow

正如您所想象的，您必须在您的可操作配置中定义这两个事件，而不是在您的 afterChange 事件中。

例如，查看您的JSFiddle 编辑：

afterRemoveRow: function (index, amount) 
    console.log(amount + " row(s) removed starting line "+ index)
,
afterCreateRow: function (index, amount) 
    console.log(amount + " row(s) added starting line "+ index)
,

---

编辑：根据您的评论，我为您想要的案例做了一个示例；知道行中的每个值在更改后何时变为空。 您可以找到一个新的简化 JSFiddle here 包含以下 afterChange 事件定义：

hot.addHook('afterChange', function(changes) 
  if (!changes) 
     return;
  
  $.each(changes, function (index, element) 
    var 
    rowEmpty = true,
    row = element[0],
    currentRowArray = hot.getData(row,0,row,hot.countCols());

    for(var i=0; i<currentRowArray[0].length-1; i++) 
      if(currentRowArray[0][i] != "") 
        rowEmpty = false;
        break;
      
    

    if(rowEmpty) 
      console.log("Row " + row + " is empty !");
    
  );
);

每次在单元格中进行更改时，事件中的代码都会检查同一行中是否至少有一个单元格包含值（如果看到则结束事件）。如果不是，它会在控制台中打印该行为空。因此，您正在寻找的结果是布尔值 rowEmpty。

另外，请注意两点：

jQuery 函数 $.each 允许您在用户同时清空两（或更多）行时使其工作。

for 循环条件中的 -1。如果你想比较你的数组的长度和列数，不要忘记列数显然不是从 0 开始计数的。所以如果有 6 列，这将是第 0 到第 5 列，因此 -1.

【讨论】：

感谢您的回复。这在一定程度上回答了我的问题。当您从上下文菜单中选择“删除行”和“插入行”功能时，您的两个事件会触发。但是，我还想检测“特定行中的所有数据都被删除”（即有人突出显示该行然后在他们的键盘上点击 DELETE）以及“当前特定行中没有数据和新值”时的场景是第一次输入”（即有一个空行，然后有人将值 1 输入到第一列）。有没有可能做到这一点？

是的，当然，在 afterChange 事件中，如果你使用 getData(row, row, col, col) （这个函数需要 4 个参数，因为你可以用它获得整个表格范围），你只需检查当前行的每个 value = "" （刚刚发生更改的位置）。你想让我用一个例子来编辑我的答案吗？如果有帮助，我可以提供一个。 （虽然可能不是完整的:)）

听起来像一个计划，你能按照建议提供一个例子吗？ :)

这是一个绝妙的解决方案，我只有一个疑虑，即此事件触发 6 次（即列数），它应该每行只触发一次。我已将其标记为解决方案，因为我可以自己解决最后一部分！

mmh 是的，我明白了，事实上，如果你同时清空 6 列，它会触发 6 次，但如果你先清空 5 列，然后删除最后一列，则只会触发一次。我稍后会尝试看看，但如果你之前解决了问题，请告诉我:)（当然为什么不编辑我的答案）