我已经按照以下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/
有谁知道如何检测何时添加或删除整行？
最佳答案
您正在寻找的是文档中还定义了另外两个事件：
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 !");
}
});
});
每次在单元格中进行更改时，事件中的代码将检查同一行上是否至少有一个包含值的单元格（如果看到一个，则完成该事件）。如果不是，它将在控制台中打印该行为空。因此，您要查找的结果是boolean rowEmpty。
另外，请注意两件事：
jQuery函数$ .each允许您在用户同时清空两行（或更多行）时使其工作。
在for循环的条件下为-1。如果要比较数组的长度和列数，请不要忘记列数显然不会从0开始计数。因此，如果有6列，则列数为0至5。因此-1。