Tabulator：如何重新加载多个表？

Question

我在这里浏览了Tabulator主题，但是没有找到与我想要达到的目标相似的东西。即，我的项目从一个大数组生成了多个制表器表。我正在尝试实现一项功能，以手动添加新表，但是有一个问题：如何使用新添加的表重新加载所有表。问题在于，它似乎可以在不删除先前加载的表的情况下生成额外的表。也许我缺少一行删除所有先前的表？

（问题如下图所示，您可以看到“空”表，而只应附加具有内容的表）

Here是一个可玩的代码笔。您可以通过在输入字段（两边）输入乱码并单击“添加字典”来复制问题。我的代码本质上是循环遍历tabledata数组中的所有嵌套数组，并为每个数组创建一个单独的表。

感谢任何人看一眼并一起思考！

这是表生成循环：

const drawTables = () => {

for (let dictionary = 0; dictionary < tabledata.length; dictionary++) {

  let table = new Tabulator(("#dictionary-" + dictionary), {
    data: tabledata[dictionary],
    layout: "fitColumns",
    reactiveData: true,
    // headerSort: false,
    layoutColumnsOnNewData: true,

    columns: [ //define the table columns
      {
        title: "domain",
        field: "domain",
        editor: "input",
        validator: "unique"
      },
      {
        title: "range",
        field: "range",
        editor: "input",
        validator: "unique"
      }
    ],
  });
}

}

这是创建新表并将其注入大表数据数组的尝试

//event listener for form entry
let addDictionaryForm = document.querySelector("#add-dictionary-form")
addDictionaryForm.addEventListener("submit", function (e) {
  e.preventDefault();
  addDictionary();
})


const addDictionary = () => {
  let newDictionary = []
  let domainInput = document.querySelectorAll(".domainInput");
  let rangeInput = document.querySelectorAll(".rangeInput");
  let rangeIdx = 0;

  //looping through form entries and adding them to the newDictionary array only if both fields are filled out
  for (let i = 0; i < domainInput.length; i++) {
    if (domainInput[i].value && rangeInput[rangeIdx].value) {
      newDictionary.push({
        domain: domainInput[i].value,
        range: rangeInput[rangeIdx].value
      });
    }
    rangeIdx++;

  }

//add form entries to the general dictionary array
  tabledata.unshift(newDictionary)

// refresh table?
drawTables();
tabledata.setData();

}

Answer 1

我建议您定义一个表数组，可以说我们在所有函数之外将其称为tables。然后在drawTables函数中，只需将新表推入该数组即可：

 var table = new Tabulator //... insert rest of table definition

 tables.push(table); //push table to array of tables.

然后，当您需要重绘所有表时，只需遍历数组并在每个表上调用redraw函数：

tables.forEach(function(table){
    table.redraw();
});