Обработка больших наборов данных сетки в JavaScript

Question

Каковы некоторые из лучших решений для обработки больших наборов данных (100 КБ) на клиенте с помощью JavaScript. В частности, если у вас есть возможности сортировки и поиска по нескольким столбцам, как вы обрабатываете выборку (и предварительную выборку) данных, привязку модели на стороне клиента (для отображения) и кэширование данных.

Я бы подумал, что хорошим решением было бы сделать вдумчивую работу в фоновом режиме. Например, первоначально, если таблица отображала N элементов, она могла бы извлечь 2N элементов, вернуть данные для пользователя, а затем перейти к получению следующих 2N элементов в фоновом режиме (даже если пользователь этого не запрашивал). Когда пользователь вносит изменения в поиск / сортировку, он выбрасывает (или может даже кэширует исходный базовый вариант) и выполняет аналогичные функции.

Можете ли вы поделиться лучшими решениями, которые вы видели?

Спасибо

Answer 1

SlickGrid делает именно то, что вы ищете. ( Демо )

Используя хранилище данных AJAX, SlickGrid может обрабатывать миллионы строк без вздрагивания.

Answer 2

Используйте плагин таблицы jQuery, например DataTables: http://datatables.net/

Он поддерживает обработку на стороне сервера для сортировки, фильтрации и разбиения на страницы.И включает поддержку конвейерной передачи для предварительной выборки следующих x страниц записей: http://www.datatables.net/examples/server_side/pipeline.html

На самом деле плагин DataTables работает 4 различными способами: 1. С таблицей HTML, так что вы можете отправить кучу HTML, а затемвся работа по сортировке, фильтрации и разбиению на страницы выполняется на стороне клиента.2. С массивом JavaScript, чтобы вы могли отправить 2D-массив и позволить ему создать таблицу оттуда.3. Источник Ajax - который на самом деле не применим к вам.4. На стороне сервера, где вы отправляете данные в формате JSON в пустую таблицу и позволяете DataTables взять их оттуда.

Answer 3

Поскольку вы отметили это с помощью Ext JS, я укажу вам Ext.ux.LiveGrid , если вы еще этого не видели. Источник доступен, поэтому вы можете посмотреть, как они решили эту проблему. Это популярное и широко используемое расширение в мире Ext JS.

С учетом вышесказанного, я лично считаю (практически), что загрузка такого количества данных бесполезна для пользователя. Ручное перетаскивание полосы прокрутки (прыжки сотен записей на пиксель) гораздо хуже, чем просто набирать то, что вы хотите. Я бы предпочел некоторую надежную фильтрацию / поиск вместо того, чтобы представлять такое количество данных пользователю.

Что если вы зашли в Google и вместо окна поиска просто загрузили весь интернет в один длинный виртуальный список, который вам пришлось прокрутить, чтобы найти свой сайт ...

Answer 4

Зависит от того, как будут использоваться данные.

Для большого набора данных, для которого была достаточна функция поиска браузера, достаточно было просто вернуть прямую таблицу HTML. Загрузка занимает некоторое время, но дисплей реагирует на старые, более медленные клиенты, и вам никогда не придется беспокоиться о его поломке.

Когда клиент выполнил сортировку и поиск, а вы не видите всю таблицу сразу, я заставил сервер отправить таблицы с разделителями табуляции через XMLHTTPRequest, проанализировал их в браузере с помощью list = String.split ('\ n ') и обновил отображение повторными вызовами $ (' node '). innerHTML =' blah '. Двигатель JS может хранить длинные строки довольно эффективно. Это работало намного быстрее на клиенте, чем показ, скрытие и перестановка узлов DOM. Создание и уничтожение новых DOM-узлов на лету оказалось очень медленным. Разделение каждой строки на поля по запросу, кажется, работает; Я не экспериментировал с такой степенью свободы.

Я никогда не пробовал очевидный трюк предварительной выборки и фона, потому что эти другие методы работали достаточно хорошо.

Answer 5

Проверьте этот исчерпывающий список таблиц и таблиц данных.

Для целей фильтрации / сортировки / разбивки на страницы вас могут заинтересовать великолепные Handsontable или DataTables в качестве бесплатной альтернативы.

Если вам нужно просто отобразить огромный список без каких-либо дополнительных функций, Clusterize.js должно быть достаточно.