制表器:在cellledited之后发生什么回调?

Question

我正在实现基于row.data{未更改，更改，新建，删除}中的rowState属性过滤行的逻辑。当一个单元格被编辑时，如果行不是一个新的行，它的rowState被改变为3(表明一个改变的行)。showChanged设置为false，因此rowState更改为3时，该行应立即消失。

在cellEdited的末尾，我正在呼叫updateFilters()。我的问题是，过滤器不适用于包含编辑单元格的行。我认为这是因为在cellEdited回调完成之前，对rowState的更改实际上不会生效。在cellEdited之后是否发生回调，以便我可以在编辑时有效地应用过滤?

public showOriginal: boolean = true;
public showChanged: boolean = false;
public showNew: boolean = false;
public showDeleted: boolean = false;
public showNewDeleted: boolean = false;

private drawTable(): void {
this.table = new Tabulator(this.tab, {
rowFormatter: this.rowStateFormatter,
cellClick:function(e, cell){
if(!cell.valueAtLoad){
cell.valueAtLoad = cell._cell.value;
}
console.log(cell);
},
cellEdited:function(cell){

var row = cell._cell.row;
var columnName = cell.getColumn()._column.field;

//new Value is different from original value;
if(cell._cell.value != cell.valueAtLoad){   
if(!row.changedCells){
row.changedCells = [];
}
row.changedCells.push(columnName);
}
//new Value is same as original value;
else {
if(row.changedCells){
if(row.changedCells.find(f => f == columnName)){
row.changedCells.pop(columnName);
}
}
console.log(row);
}
//Set rowState + background Color
if(row.changedCells.length >= 1){ //If row has changes
if(!row.data["isNewRow"]) { //if row has changes and is original row
row.data["rowState"] = 3;
row.getElement().style.backgroundColor = "#A6A6DF";
}
}
else{
row.getElement().style.backgroundColor = "";
}
this.updateFilters();
},
layout: "fitDataStretch",
movableColumns: true,
height: "100%",
pagination: "local",
paginationSize: 25,
paginationSizeSelector: [25, 50, 100],
selectable: true,
selectableRangeMode: "click",
data: this.tabRows,
columns: this.tabHeaders
});
document.getElementById(`${this.tableInfo.id}`).appendChild(this.tab);
}

private updateFilters(){
var rowStateFilter = [];
if(this.showOriginal) {rowStateFilter.push(0); rowStateFilter.push(1)}
if(this.showNew) {rowStateFilter.push(2)}
if(this.showChanged) {rowStateFilter.push(3)}
if(this.showDeleted) {rowStateFilter.push(4)}
if(this.showNewDeleted) {rowStateFilter.push(5)}
this.table.setFilter("rowState", "in", rowStateFilter);
}

Answer 1

从tabulator.js中，它看起来像:

细胞。cellEdited、表。cellEdited, table.dataChanged

不确定是什么表。cellleded看起来像一个默认的空函数()。如果单元格编辑更改了分组，则分组代码中可能还有更多…

if (this.column.cellEvents.cellEdited) {
this.column.cellEvents.cellEdited.call(this.table, component);
}
if (this.table.options.groupUpdateOnCellEdit && this.table.options.groupBy && this.table.modExists("groupRows")) {
this.table.modules.groupRows.reassignRowToGroup(this.row);
}
this.cellRendered();
this.table.options.cellEdited.call(this.table, component);
if (this.table.options.dataChanged) {
this.table.options.dataChanged.call(this.table,this.table.rowManager.getData());
}

Answer 2

触发哪些回调取决于您在表上安装了哪些模块(例如验证模块在编辑后添加事件)幸运的是，Tabulator附带了调试工具，可以让您在控制台中窥视事件，以查看哪些事件以什么顺序触发。

启用debugEventsExternal选项将导致所有外部事件的控制台日志，因此您可以看到当

时触发了什么事件

var table = new Tabulator("#example-table", {
debugEventsExternal:true, //console log external events
});

查看所有可用工具的详细信息