制表符：cellEdited 后会发生什么回调？答案

【问题标题】：Tabulator: What callback(s) occur after cellEdited?制表符：cellEdited 后会发生什么回调？
【发布时间】：2021-08-07 23:11:32
【问题描述】：

我正在实现基于row.data 中的rowState 属性过滤行的逻辑{未更改，已更改，新，已删除}。编辑单元格时，如果该行不是新行，则将其rowState 更改为3（表示更改的行）。 showChanged 设置为 false，因此一旦 rowState 更改为 3，该行就会消失。

在cellEdited 结束时，我正在打电话给updateFilters()。我的问题是过滤器不适用于包含已编辑单元格的行。我认为这是因为对rowState 的更改在cellEdited 回调完成之前不会真正生效。 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);
  }

【问题讨论】：

标签： javascript callback tabulator

【解决方案1】：

从 tabulator.js 来看，它看起来像：

cell.cellEdited ,table.cellEdited, table.dataChanged

不确定 table.cellEdited 是什么，它看起来像一个默认的空函数（）。如果单元格编辑更改了分组，分组代码中可能还会有更多内容......

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());
}

【讨论】：

【解决方案2】：

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

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

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

查看Debug Tools Documentation，了解所有可用工具的完整详情

【讨论】：