Протестированы следующие сетки

  1. DataTables
  2. Угловая сетка UI
  3. Slick Grid
  4. начальная загрузка

Наблюдение:

  • Сетка Datatables и Bootstrap очень медленная
  • Гладкая сетка не активна на данный момент
  • Сетка углового интерфейса не поддерживает или имеет все параметры экспорта

Какова самая быстрая сетка данных, которая имеет следующие особенности

  1. поиск
  2. пагинация
  3. Пример HTML
  4. Параметры экспорта - CSV, копировать в буфер обмена, PNG, Word, Excel, CSV, PNG, XML
9
Kathir 27 Авг 2017 в 06:23

3 ответа

Лучший ответ

Моя любимая библиотека таблиц - это Bootstrap-Table

Он имеет все функции, которые вы ищете, и работает довольно хорошо.

  1. Пример HTML, поиск, разбиение на страницы
  2. Параметры экспорта

Для достижения достойного времени загрузки на 10 000+ записей вам, скорее всего, потребуется использовать AJAX и / или Pagination.

Вот фрагмент, показывающий 5000 результатов, работающих нормально:

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
</head>

<body>
  <table data-toggle="table"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-show-export="true"
       data-minimum-count-columns="2"
       data-show-pagination-switch="true"
       data-pagination="true"
       data-id-field="id"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-show-footer="false"
       data-side-pagination="client"
       data-url="https://jsonplaceholder.typicode.com/photos">
    <thead>
      <tr>
        <th data-field="id">Id</th>
        <th data-field="title">Title</th>
        <th data-field="url">URL</th>
        <th data-field="thumbnailUrl">Thumbnail URL</th>
      </tr>
    </thead>
</body>

</html>

Здесь происходит несколько вещей, которые улучшают производительность:

  1. Так как данные поступают в библиотеку более естественным образом, мы получаем приятную «Загрузка ...», которая делает пользователей внутри теплыми и суетливыми. Если не только потому, что он дает обратную связь пользователю. Поэтому мы готовы подождать несколько лишних секунд.

  2. Мы переключаемся с таблицы HTML с данными в ней на объект JSON.

При использовании HTML для источника данных страница должна полностью отображать слишком подробное представление данных (это блокирует загрузку формы JavaScript). Затем библиотека загружает и начинает анализ этих данных (5000 строк X 10 столбцов = 50000 элементов). Затем библиотека должна применить свою логику к DOM. В зависимости от того, как написан код, это будет означать обработку всех результатов в 3 раза.

Или

При использовании JSON (JavaScript Object Notation) HTML-страница очень легкая, поэтому она немедленно завершает рендеринг. Кроме того, данные на языке JavaScript являются родными и, следовательно, они считываются непосредственно в объект JavaScript. Библиотека создает объект и связывает его с содержимым таблицы. Это означает, что для начала рендеринга требуется добавить 1 объект для таблицы.

По сути, мы добавляем параллелизм в рендеринг результатов. Таким образом, все 3 шага все еще происходят, но в первом случае каждый шаг должен ждать следующего. Тогда как в последнем случае шаги происходят параллельно. И так как мы чувствуем, что он завершил загрузку, как только он рендерит 1 строку, он чувствует себя намного быстрее.

Добавлен экспорт по вашему запросу, но фактические ошибки библиотеки, вероятно, являются ограничением инструмента сниппета.

5
fjoe 30 Авг 2017 в 04:28

10К данных очень большие для обычного клиента. Не имеет значения, какой компонент JS. DataTables BootStrap и т. Д. Работают очень медленно, потому что оперативной памяти клиента недостаточно для отображения данных по 10 КБ.

0
Serdar KUŞ 4 Сен 2017 в 22:38

Не уверен, что вы можете использовать React, но вы уже зарегистрировались https://react-table.js.org или https://facebook.github.io/fixed-data-table? Похоже, что они оба соответствуют всем в вашем списке, кроме для экспорта.

В общем, экспортировать в разные форматы сложно, поэтому на есть множество https://www.npmjs.com <. / a> которые специально занимаются экспортом данных в разные форматы.

Удачи!

1
sparrow 29 Авг 2017 в 05:52