Handsontable - afterChangeEvent如何检测整行何时被删除或添加
问题描述:
我已经创建了一个自定义函数,该函数根据以下Handsontable链接中的说明在afterChange单元事件上执行。Handsontable - afterChangeEvent如何检测整行何时被删除或添加
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/
有谁知道什么时候一整排被添加或删除我如何检测?
答
你要寻找的是另两个事件的文件中也规定:
正如你可以想像,你将不得不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。
另外,还要注意两点:
jQuery的功能$。每个允许你做它的工作原理,当用户空两个(或更多)排在同一时间。
该-1条件的为循环。如果你想比较你的数组的长度和列的数量,不要忘记列的数量显然不会从0开始计数。所以如果有6列,这将是列0到5,因此-1。
感谢您的回应。这有点回答我的问题。当您从上下文菜单中选择“删除行”和“插入行”功能时触发两个事件。但是,我还希望在“删除特定行内的所有数据”(即某人突出显示该行然后在其键盘上点击DELETE)以及“当前没有数据存在于特定行中并且新值是第一次输入“(即有空行,然后有人将数值1输入第一列)。是否有可能实现这一目标? – Josh
是的,用afterChange事件,如果你使用getData(row,row,col,col)(这个函数需要4个参数,因为你可以用它得到整个表的范围),你只需检查每个值是否为“ “的排列(发生变化的地方)。你想让我用一个例子来编辑我的答案吗?如果有帮助,我可以提供一个。 (虽然可能不是一个完整的:)) – fab
听起来像一个计划,你可以提供一个例子,虽然建议? :) – Josh