Табулятор: загрузка огромного набора данных занимает много времени - PullRequest
Новая
       3

Табулятор: загрузка огромного набора данных занимает много времени

0 голосов
/ 25 марта 2020

Я использую табулятор для заполнения данных на моей странице. Есть некоторые опасения, что я заполняю 38 таблиц, и в этих таблицах у меня примерно 2000 строк данных в каждой.

Проблема в том, что загрузка данных занимает много времени: приблизительно 30 минут, да 30 минут !. и это не приемлемо ни в коем случае. Я попытался использовать разбиение на страницы, но, к сожалению, у нас есть жесткое требование печати, которое не выполняется при разбивке на страницы (поскольку все данные не доступны, когда мы нажимаем Ctrl + P.

Я использую HTML Formatter, textarea и fit столбцы.

Вот одна из таблиц, которую я использую: 

    const someTable= new Tabulator('#someContainer', {
        layout: 'fitColumns',
        resizableRows: true,
        columns: [
            { title: 'f1', field: 'col1', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f2', field: 'col2', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f3', field: 'col3', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f4', field: 'col4', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f5', field: 'col5', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f6', field: 'col6', sorter: 'string', headerSort: false, formatter: 'textarea' }
        ]
    });

    let someData = document.getElementById('someData').value;
    someData= JSON.parse(someData);
    someTable.addData(someData, true);
    setTimeout(function() {
        someTable.redraw(true);
    }, 100);
}

Может ли кто-нибудь помочь мне понять, почему это происходит? (Я проверил, удалив тайм-аут тоже. не сильно помогает).

Кроме того, я попытался использовать прогрессивную загрузку, но это также не уменьшает время.

1 Ответ

0 голосов
/ 31 марта 2020

Прямо сейчас вы выполняете много лишней работы для Табулятора.

  1. Создание Табулятора.
  2. Заполнение его данными.
  3. Перерисовка .

Это все интенсивные задачи для Табулятора. Вы должны создать таблицу с данными. Это предотвращает необходимость перерисовки таблицы и увеличивает скорость загрузки. Вот ваш модифицированный пример. 

    let someData = document.getElementById('someData').value;
    someData = JSON.parse(someData);
    const someTable = new Tabulator('#someContainer', {
        layout: 'fitColumns',
        resizableRows: true,
        data: someData,
        columns: [
            { title: 'f1', field: 'col1', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f2', field: 'col2', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f3', field: 'col3', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f4', field: 'col4', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f5', field: 'col5', sorter: 'string', headerSort: false, formatter: 'textarea' },
            { title: 'f6', field: 'col6', sorter: 'string', headerSort: false, formatter: 'textarea' }
        ]
    });

При загрузке такого количества таблиц вы должны взглянуть на оптимизацию вне Tabulator. Я не думаю, что какой-либо пользователь будет смотреть на все 38 таблиц одновременно. Вы должны поместить наиболее часто посещаемые таблицы вверху и создавать / загружать их при открытии страницы. Затем, когда пользователь прокручивает, вы должны создать / загрузить дополнительные таблицы. Это та же самая ситуация, что и при отложенной загрузке изображений, за исключением использования табулятора.

...