Табулятор: как перезагрузить несколько таблиц? - PullRequest
Новая
       6

Табулятор: как перезагрузить несколько таблиц?

0 голосов
/ 22 января 2020

Я просматривал темы Табулятора здесь, но не нашел ничего похожего на то, чего я пытаюсь достичь. А именно, мой проект генерирует несколько таблиц Tabulator из одного большого массива. Я пытаюсь реализовать функцию ручного добавления новой таблицы, но возникают проблемы с одной вещью: как перезагрузить все таблицы с новой добавленной таблицей. Проблема в том, что он, кажется, генерирует дополнительные, не удаляя ранее загруженные таблицы. Возможно, мне не хватает одной строки, удаляющей все предыдущие таблицы?

(проблема, изображенная ниже, вы можете видеть «пустые» таблицы, в то время как должна быть добавлена ​​только та, которая содержит контент) enter image description here

Здесь - кодовая ручка, с которой можно поиграть. Вы можете повторить проблему, введя gibberi sh в поля ввода (обе стороны) и щелкнув «Добавить словарь». Мой код по существу перебирает все вложенные массивы из массива tabledata и создает для каждого отдельную таблицу.

Спасибо всем, кто взглянул и подумал!

Вот генерирующая таблицу l oop: 

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

}

1 Ответ

0 голосов
/ 23 января 2020

Я бы предложил вам определить массив таблиц, скажем, мы называем его таблиц вне всех ваших функций. Затем в функции 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();
});
...