JavaScript сетка данных для миллионов строк [закрыто]

http://wiki.github.com/mleibman/SlickGrid/

"SlickGrid использует виртуальный рендеринг, чтобы вы могли легко работать с сотнями тысяч элементов без снижения производительности. Фактически, нет никакой разницы в производительности между работой с сеткой с 10 строками против 100 000 строк."

некоторые моменты:

• адаптивная виртуальная прокрутка (обрабатывать сотни тысяч rows)
• очень быстрая скорость рендеринга
• фоновый пост-рендеринг для более богатых ячеек
• настраиваемые
• полная навигация с помощью клавиатуры
• изменение размера столбца/изменение порядка/Показать / Скрыть
• колонка autosizing & force-fit
• Pluggable formatters клетки & Редакторы
• поддержка редактирования и создания новых строк." by mleibman

Это бесплатно (лицензия MIT). Он использует jQuery.

лучшие сетки, на мой взгляд, ниже:

• фильтра поиска flexigrid: http://flexigrid.info/
• сетка jQuery: http://www.trirand.com/blog/
• jqGridView: http://plugins.jquery.com/project/jqGridView
• jqxGrid: http://www.jqwidgets.com/
• Я: http://reconstrukt.com/ingrid/
• SlickGrid http://github.com/mleibman/SlickGrid
• DataTables http://www.datatables.net/index
• ShieldUI http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows

мои лучшие 3 варианта-jqGrid, jqxGrid и DataTables. Они могут работать с тысячами строк и поддержка виртуализации.

Я не хочу начинать войну пламени, но предполагая, что ваши исследователи-люди, Вы не знаете их так хорошо, как думаете. Просто потому, что они есть петабайты данных не делают их способными просматривать даже миллионы записей каким-либо значимым образом. Они могут сказать, что они хочу посмотреть миллионы записей, но это просто глупо. Попросите самых умных исследователей сделать некоторые основные математические расчеты: предположим, они тратят 1 секунду на просмотр каждой записи. С такой скоростью это займет 1000000 секунд, который работает более шести недель (из 40 часов работы-Недели без перерывов на еду или туалет).

Они (или вы) серьезно думают, что один человек (тот, кто смотрит на сетку) может собрать такую концентрацию? Они действительно много делают за эту 1 секунду, или они (более вероятно) отфильтровывают материал не хотите? Я подозреваю, что после просмотра подмножества" разумного размера " они могут описать вам фильтр, который будет автоматически фильтровать долой эти записи.

Как paxdiablo и слипер Смит и Лассе V Карлсен также подразумевали, вы (и они) не продумали требования. С другой стороны, теперь, когда вы нашли SlickGrid, я уверен, что необходимость этих фильтров стало сразу видно.

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

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

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

Я рекомендую сетку Ext JS с функцией буферизации.

http://www.extjs.com/deploy/dev/examples/grid/buffer.html

dojox.сетка.Элемент DataGrid предлагает абстракция JS для данных, так что вы можете подключить его в различные бэкэнды с додзе.хранение данных или написать свой собственный. Очевидно, вам понадобится тот, который поддерживает произвольный доступ для этого количества записей. DataGrid также обеспечивает полную доступность.

Edit Итак, вот ссылка на статья Мэтью Рассела это должно предоставить пример, который вам нужен, просматривая миллионы записей с dojox.сетка. Обратите внимание, что он использует старую версию сетки, но концепции те же, были только некоторые несовместимые улучшения API.

О, и это совершенно бесплатно с открытым исходным кодом.

(отказ от ответственности: я автор w2ui)

недавно я написал статью о том, как реализовать JavaScript grid с 1 миллионом записей (http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records). Я обнаружил, что в конечном итоге есть 3 ограничения, которые мешают принимать его выше:

1. Высота div имеет предел (может быть преодолена с помощью виртуальной прокрутки)
2. операции, такие как сортировка и начала поиска медленно после 1 миллиона записей или около того
3. ОЗУ ограничено, потому что данные хранятся в массиве JavaScript

я протестировал сетку с 1 миллионом записей (кроме IE), и она хорошо работает. См. Статью для демонстраций и примеров.

Я плагин сетки jQuery, было приятно.

демо

вот пара оптимизаций, вы можете применять вам ускорить вещи. Просто думаю вслух.

поскольку количество строк может быть в миллионах, вам понадобится система кэширования только для данных JSON с сервера. Я не могу представить, что кто-то хочет загрузить все X миллионов элементов, но если бы они это сделали, это было бы проблемой. Это маленький тест на Chrome для массива на 20M + целые числа постоянно вылетает на моей машине.

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);​

вы можете использовать LRU или какой-то другой алгоритм кэширования и имеют верхнюю границу того, сколько данных вы хотите кэшировать.

для самих ячеек таблицы я думаю, что построение / уничтожение узлов DOM может быть дорогостоящим. Вместо этого вы можете просто предварительно определить количество ячеек X и всякий раз, когда пользователь прокручивает новую позицию, вводить данные JSON в эти ячейки. Полоса прокрутки практически не будет иметь прямого отношения к тому, сколько места (высоты) требуется для представления всего набор данных. Вы можете произвольно установить высоту контейнера таблицы, скажем 5000px, и сопоставить это с общим количеством строк. Например, если высота контейнеров составляет 5000px и в общей сложности 10M строк, то starting row ≈ (scroll.top/5000) * 10M здесь scroll.top обозначает расстояние прокрутки от верхней части контейнера. небольшая демонстрация здесь.

чтобы определить, когда запрашивать дополнительные данные, в идеале объект должен выступать в качестве посредника, который слушает события прокрутки. Этот объект отслеживает, как быстро пользователь прокручивает, и когда кажется, что пользователь замедляется или полностью остановился, делает запрос данных для соответствующих строк. Получение данных таким образом означает, что ваши данные будут фрагментированы, поэтому кэш должен быть разработан с учетом этого.

также ограничения браузера на максимальную исходящие соединения могут играть важную роль. Пользователь может прокрутить до определенной позиции, которая будет запускать запрос AJAX, но до этого пользователь может прокрутить до некоторых другая часть. Если сервер не отвечает на запросы из очереди и приложение будет выглядеть зависшим. Вы можете использовать диспетчер запросов, через который маршрутизируются все запросы, и он может отменить ожидающие запросы, чтобы освободить место.

Я знаю, это старый вопрос, но все же.. Существует также dhtmlxGrid, который может обрабатывать миллионы строк. Есть демо С 50 000 строк но количество строк, которые могут быть загружены / обработаны в сетке, не ограничено.

отказ от ответственности: я из команды DHTMLX.

Я предлагаю вам прочитать эту

http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/

отказ от ответственности: я сильно использовать Юи объекта DataTable без головной боли в течение длительного времени. Он мощный и стабильный. Для ваших нужд вы можете использовать ScrollingDataTable wich suports

• х-прокрутка
• y-прокрутка
• ху-прокрутка
• мощный механизм событий

для того, что вам нужно, я думаю, вы хотите это tableScrollEvent. Его API говорит

срабатывает, когда фиксированная прокрутка DataTable имеет прокрутку.

поскольку каждый DataTable использует источник данных,вы можете контролировать свои данные через tableScrollEvent вместе с размером цикла рендеринга для того, чтобы заполнить ваш ScrollingDataTable в соответствии с вашими потребностями.

размер цикла рендеринга говорит

в случаях, когда ваш DataTable должен отображать весь очень большой набор данных, конфигурация renderLoopSize может помочь управлять визуализацией DOM браузера, чтобы поток пользовательского интерфейса не запирался на очень больших таблицах. Любое значение больше 0 приведет к выполнению рендеринга DOM в цепочках setTimeout (), которые отображают указанное количество строк в каждом цикле. Идеальное значение должно быть определено для каждой реализации, так как нет жестких и быстрых правил, только общие рекомендации:

• по умолчанию renderLoopSize равен 0, поэтому все строки отображаются в одном цикле. RenderLoopSize > 0 добавляет накладные расходы, поэтому используйте вдумчиво.
• Если ваш набор данных достаточно велик (количество строк X количество столбцов X сложность форматирования), что пользователи испытывают задержку в визуальном рендеринге и / или это приводит к зависанию сценария, рассмотрите возможность установки renderLoopSize.
• renderLoopSize под 50, вероятно, не стоит. RenderLoopSize > 100, вероятно, лучше.
• данных набор, вероятно, не считается достаточно большим, если он не имеет сотен и сотен строк.
• наличие строк renderLoopSize > 0 и

например

// Render 100 rows per loop
 var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
     renderLoopSize:100
 });

- это всего лишь один источник. Оно может будьте JSON, JSFunction, XML и даже одним HTML-элементом

здесь вы можете увидеть простой учебник, предоставленные мной. Будьте в курсе другого DATA_TABLE pluglin поддерживает одиночный и двойной щелчок в то же время. Yui DataTable позволяет. И еще,вы можете использовать его даже с jQuery без головной боли

некоторые примеры вы можете увидеть

• элемент списка

Не стесняйтесь вопрос о чем-нибудь еще, что вы хотите о Yui DataTable.

С уважением,

Я вроде как не вижу смысла, для jqGrid вы можете использовать функцию виртуальной прокрутки:

http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling

но опять же, миллионы строк с фильтрацией можно сделать:

http://www.trirand.net/aspnetmvc/grid/performancelinq

Я действительно не вижу смысла "как будто нет страницы", хотя, я имею в виду... нет способа отобразить 1,000,000 строк сразу в браузере-это 10 МБ HTML raw, я вроде как не понимаю, почему пользователи не хотят видеть страницы.

в любом случае...

лучший подход, который я мог придумать, - это загрузка куска данных в формате json для каждого прокрутки или некоторого ограничения до окончания прокрутки. json можно легко преобразовать в объекты, и, следовательно, строки таблицы могут быть легко построены ненавязчиво

Я настоятельно рекомендую открыть-Рико. Это трудно реализовать в начале, но как только вы схватите его, вы никогда не оглянетесь назад.

Я знаю, что этот вопрос несколько лет, но jqgrid теперь поддерживает виртуальную прокрутку:

http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php

но с отключенной разбиением на страницы

Я предлагаю Sigma grid, Sigma grid имеет встроенные функции подкачки, которые могут поддерживать миллионы строк. Кроме того, для этого может потребоваться удаленная подкачка. посмотреть демо http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

взгляните на dGrid:

http://dojofoundation.org/packages/dgrid/

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

Не кипятите океан, чтобы сделать чашку чая.