如何在制表器中动态实现嵌套表答案

【问题标题】：How to implement nested tables dynamically in tabulator如何在制表器中动态实现嵌套表
【发布时间】：2021-01-28 03:26:14
【问题描述】：

我正在尝试在制表器中实现嵌套表，其中数据可以嵌套到 n 级。我遇到的问题是分配给rowFormatter 的函数无法看到createTable() 方法。如何让回调函数看到createTable() 函数或我的类中的其他函数？

 private createTable(element: HTMLDivElement,jsonFileContents, schemaId: string): Tabulator {
    var table = new Tabulator(this.tab, {
      columns: this.buildHeaders(jsonFileContents, schemaId),
      data: this.buildRows(jsonFileContents, jsonFileContents.schema.find(s => s.parent == null).guid),
      rowFormatter:function(row) {
        var childrenSchemas = jsonFileContents.schemas.filter(s => s.parent == row["schemaId"]);
        if(childrenSchemas){
          childrenSchemas.forEach(schema => {
            var holderEl = document.createElement("div");
            var tableEl = document.createElement("div");
            holderEl.appendChild(tableEl);
            row.getElement().appendChild(holderEl);
            var subTable = this.createTable(tableEl, jsonFileContents, schema.guid); //<---HERE
          });
        }
      }      
    });
  }

【问题讨论】：

标签： javascript typescript callback tabulator

【解决方案1】：

您遇到的问题是因为在 rowFormatter 的上下文中 this 指的是 Tabulator 表对象。

因此，您可以在定义行格式化程序回调时使用箭头函数，这将保留父级的范围：

rowFormatter:(row) => {

}

或者您可以将this 的范围存储在不同的变量中，我们将其称为self，然后在回调中使用它：

private createTable(element: HTMLDivElement,jsonFileContents, schemaId: string): Tabulator {
    var self = this;

    var table = new Tabulator(this.tab, {
        rowFormatter:function(row) {
            self.createTable();
        }
    });
}

【讨论】：