制表器：如何重新加载多个表？

Question

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

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

这是一个可以玩的代码笔。 您可以通过在输入字段（两侧）中输入乱码并单击“添加字典”来复制问题。我的代码基本上循环遍历 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

我建议您定义一个表数组，假设我们在所有函数之外将其称为表。 然后在drawTables函数中简单地将新表格推到这个数组上：

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

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

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

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