Handsontable - afterChangeEvent如何檢測整行何時被刪除或添加

Question

我已經創建了一個自定義函數，該函數根據以下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/

有誰知道什麼時候一整排被添加或刪除我如何檢測？

Answer 1

你要尋找的是另兩個事件的文件中也規定：

• afterCreateRow
• afterRemoveRow

正如你可以想像，你將不得不defiene這兩個事件在你的可移動配置中，而不是在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方含以下改動後的事件定義：

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。

另外，還要注意兩點：

1. jQuery的功能$。每個允許你做它的工作原理，當用戶空兩個（或更多）排在同一時間。

2. 該-1條件的爲循環。如果你想比較你的數組的長度和列的數量，不要忘記列的數量顯然不會從0開始計數。所以如果有6列，這將是列0到5，因此-1。