Handsontable

Question

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

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.
]

我创建了一个示例 fiddle。请参阅下面的 link。

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

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

Answer 1

您要查找的是文档中还定义的另外两个事件：

如您所想，您将不得不在可操作的配置中而不是在 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允许你让它在用户为空时工作同时有两行（或更多行）。
-1在for循环的条件下。如果你想比较数组的长度和列数，不要忘记列数显然不是从 0 开始计数的。所以如果有 6 列，这将是列 0 到 5，因此 -1.

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

Handsontable - afterChangeEvent how to detect when a whole row is deleted or added

javascript