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

【问题标题】：Tabulator: how to reload multiple tables?Tabulator：如何重新加载多个表？
【发布时间】：2020-01-21 21:02:23
【问题描述】：

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

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

Here 是一个可以玩的代码笔。您可以通过在输入字段（双方）中输入乱码并单击“添加字典”来复制问题

感谢任何人的关注和思考！

这是生成表格的循环：

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"
      }
    ],
  });
}

}

这是尝试创建一个新表并将其注入到大 tabledata 数组中

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

}

【问题讨论】：

标签： javascript dom tabulator

【解决方案1】：

我建议您定义一个表数组，假设我们在您的所有函数之外将其称为 tables。然后在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();
});

【讨论】：