Siatka danych JavaScript dla milionów wierszy [zamknięta]

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

"SlickGrid wykorzystuje renderowanie wirtualne, aby umożliwić łatwą pracę z setkami tysięcy elementów bez spadku wydajności. W rzeczywistości nie ma różnicy w wydajności między pracą z siatką z 10 rzędami a 100 ' 000 rzędami."

niektóre atrakcje:

• Adaptive virtual scrolling (obsługuje setki tysięcy wierszy)
• Niezwykle szybki szybkość renderowania
• post-renderowanie w tle dla bogatszych komórek
• konfigurowalny & Konfigurowalny
• Pełna nawigacja z klawiaturą
• zmiana rozmiaru kolumny/Zmiana kolejności/Pokaż / Ukryj
• Kolumna autozyzing & force-fit
• Pluggable cell formatters & editors
• Wsparcie dla edycji i tworzenia nowych wierszy." przez mleibman

Jest darmowy (licencja MIT). Informatyka używa jQuery.

Najlepsze siatki moim zdaniem są poniżej:

• Flexigrid: http://flexigrid.info/
• jQuery Grid: http://www.trirand.com/blog/
• jqGridView: http://plugins.jquery.com/project/jqGridView
• jqxGrid: http://www.jqwidgets.com/
• Ingrid: 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

Moje najlepsze 3 opcje to jqGrid, jqxGrid i DataTables. Mogą pracować z tysiącami wierszy i obsługiwać wirtualizację.

Nie chcę rozpętać wojny ognia, ale zakładając, że twoi badacze są ludźmi, nie znasz ich tak dobrze, jak myślisz. Tylko dlatego, że mają petabajty danych, nie czyni ich zdolnymi do oglądania nawet milionów rekordów w jakikolwiek znaczący sposób. Mogą powiedzieć, że chcą zobaczyć miliony płyt, ale to głupie. Niech twoi najmądrzejsi naukowcy wykonają podstawową matematykę: Załóżmy, że spędzają 1 sekundę na oglądaniu każdego rekordu. W tym tempie zajmie to 1000000 sekund, co praca trwa ponad sześć tygodni (40 godzin pracy-tygodnie bez przerw na jedzenie lub toaletę).

Czy oni (lub ty) poważnie myślą, że jedna osoba (ta, która patrzy na siatkę) może zebrać taką koncentrację? Czy naprawdę robią wiele w ciągu tej 1 sekundy, czy też (bardziej prawdopodobne) filtrują rzeczy, których nie chcą? Podejrzewam, że po obejrzeniu" rozsądnej wielkości " podzbioru, mogliby opisać Ci filtr, który automatycznie odfiltrowałby te rekordy.

Jak zasugerowali paxdiablo i Sleeper Smith i Lasse przeciwko Karlsen, ty (i oni) nie przemyślałeś wymagań. Z drugiej strony, teraz, gdy znalazłeś SlickGrid, jestem pewien, że potrzeba tych filtrów stała się natychmiast oczywista.

Mogę powiedzieć z całkiem dużą pewnością, że naprawdę nie musisz pokazywać milionów wierszy danych użytkownikowi.

Nie ma na świecie użytkownika, który byłby w stanie zrozumieć lub zarządzać tym zestawem danych, więc nawet jeśli technicznie uda Ci się go wyciągnąć, nie rozwiążesz żadnego znanego problemu dla tego użytkownika.

Zamiast tego skupiłbym się na Dlaczego użytkownik chce zobaczyć dane. Użytkownik nie chce widzieć danych tylko po to, aby zobaczyć dane, zwykle pojawia się pytanie pytałem. Jeśli zamiast tego skupisz się na odpowiadaniu na te pytania, będziesz znacznie bliżej czegoś, co rozwiązuje rzeczywisty problem.

Polecam siatkę Ext JS z funkcją buforowanego widoku.

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

Dojox./ align = "left" / DataGrid oferuje abstrakcję JS dla danych, dzięki czemu można ją podłączyć do różnych backendów za pomocą dostarczonego dojo.przechowuje dane lub pisze własne. Będziesz oczywiście potrzebował takiego, który obsługuje losowy dostęp do tak wielu rekordów. DataGrid zapewnia również pełną dostępność.

Edytuj więc oto link do artykułu Matthew Russella , który powinien dostarczyć przykład, którego potrzebujesz, przeglądając miliony rekordów z dojox./ align = "left" / Zauważ, że używa starej wersji siatki, ale koncepcje są takie same, było tylko kilka niekompatybilnych ulepszeń API.

Oh, I to jest całkowicie darmowe open source.

(Zastrzeżenie: jestem autorem w2ui)

Niedawno napisałem artykuł o tym, jak zaimplementować siatkę JavaScript z 1 milionem rekordów ( http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records ). odkryłem, że ostatecznie są 3 ograniczenia, które uniemożliwiają zabranie go wyżej:

1. Wysokość div ma limit (można go pokonać przez wirtualne przewijanie)
2. operacje takie jak sortowanie i wyszukiwanie zaczynają być powolne po 1 milionie rekordów lub więc
3. RAM jest ograniczony, ponieważ dane są przechowywane w tablicy JavaScript

Przetestowałem siatkę z 1 milionem rekordów (poza IE) i działa dobrze. Zobacz artykuł demo i przykłady.

Użyłem jQuery Grid Plugin , było miło.

Dema

Oto kilka optymalizacji, które możesz zastosować i przyspieszyć. Tylko głośno myślę.

Ponieważ liczba wierszy może być w milionach, będziesz potrzebował systemu buforowania tylko dla danych JSON z serwera. Nie wyobrażam sobie, żeby ktoś chciał ściągnąć wszystkie x miliony pozycji, ale gdyby tak było, byłby to problem. Ten mały test na Chrome dla tablicy na liczbach całkowitych 20M+ stale zawiesza się na moim komputerze.

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

Możesz użyć LRU lub jakiegoś innego algorytm buforowania i mają górną granicę, ile Danych chcesz buforować.

Dla samych komórek tabeli, myślę, że konstruowanie / niszczenie węzłów DOM może być kosztowne. Zamiast tego możesz po prostu wstępnie zdefiniować liczbę komórek X i za każdym razem, gdy użytkownik przewija się do nowej pozycji, wstrzyknij dane JSON do tych komórek. Scrollbar praktycznie nie ma bezpośredniego związku z tym, ile miejsca (wysokości) jest wymagane do reprezentowania całego zbioru danych. Można dowolnie ustawić stół wysokość kontenera, powiedzmy 5000px, i odwzoruj to na całkowitą liczbę wierszy. Na przykład, jeśli wysokość kontenerów wynosi 5000px i jest w sumie 10M wierszy, to starting row ≈ (scroll.top/5000) * 10M Gdzie scroll.top reprezentuje odległość przewijania od góry kontenera. Małe demo tutaj .

Aby wykryć, kiedy żądać większej ilości danych, obiekt powinien działać jako mediator, który nasłuchuje zdarzeń przewijania. Obiekt ten śledzi jak szybko użytkownik przewija i kiedy wygląda na to, że użytkownik zwalnia w dół lub całkowicie zatrzymany, sprawia, że żądanie danych dla odpowiednich wierszy. Pobieranie danych w ten sposób oznacza, że dane będą fragmentowane, więc pamięć podręczna powinna być zaprojektowana z myślą o tym.

Ważną rolę mogą odegrać również limity przeglądarek dla maksymalnych połączeń wychodzących. Użytkownik może przewijać do określonej pozycji, która uruchomi żądanie AJAX, ale zanim to zakończy, użytkownik może przewijać do innej części. Jeśli serwer nie reaguje na żądania zostanie ustawiony w kolejce, a aplikacja będzie wyglądać na nie reagującą. Możesz użyć menedżera żądań, za pomocą którego wszystkie żądania są kierowane i może on anulować oczekujące żądania, aby zrobić miejsce.

Wiem, że to stare pytanie, ale i tak.. Istnieje również dhtmlxGrid, który może obsługiwać miliony wierszy. Istnieje demo z 50 000 wierszy , ale liczba wierszy, które można załadować/przetworzyć w siatce jest nieograniczona.

Zastrzeżenie: jestem z dhtmlx team.

Proponuję przeczytać to

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

Disclaimer: i use Yui DataTable bez bólu głowy przez długi czas. Jest potężny i stabilny. Do Twoich potrzeb możesz użyć ScrollingDataTable wich suports

• x-scrolling
• y-scrolling
• XY-przewijanie
• potężny mechanizm zdarzeń

Na to, czego potrzebujesz, myślę, że chcesz tableScrollEvent. Jego API mówi

Wywołane, gdy stały scrolling DataTable ma zwój.

Ponieważ każdy DataTable używa źródła danych, możesz monitorować jego DANE poprzez tableScrollEvent wraz z rozmiarem pętli renderowania w celu wypełnienia ScrollingDataTable zgodnie z Twoimi potrzebami.

Rozmiar pętli renderowania mówi

W przypadkach, gdy Twój DataTable musi wyświetlić całość bardzo dużego zestawu danych, Konfiguracja renderloopsize może pomóc w zarządzaniu renderowaniem DOM przeglądarki, aby wątek interfejsu nie został zablokowany bardzo duże tabele . Każda wartość większa niż 0 spowoduje, że renderowanie DOM zostanie wykonane w łańcuchach setTimeout (), które renderują określoną liczbę wierszy w każdej pętli. Wartość idealną należy określić dla implementacji, ponieważ nie ma twardych i szybkich reguł, tylko ogólne wytyczne: {]}

• domyślnie renderLoopSize to 0, więc wszystkie wiersze są renderowane w jednej pętli. Renderloopsize > 0 dodaje nagłówek, więc używaj rozważnie.
• Jeśli zbiór danych jest duży wystarczy (Liczba wierszy X liczba kolumn x złożoność formatowania), że użytkownicy doświadczają opóźnienia w wizualnym renderowaniu i/lub powoduje zawieszenie skryptu, rozważ ustawienie renderLoopSize.
• renderLoopSize poniżej 50 prawdopodobnie nie jest tego wart. Renderloopsize > 100 jest prawdopodobnie lepszy.
• zbiór danych prawdopodobnie nie jest uważany za wystarczająco duży, chyba że ma setki wierszy.
• posiadanie renderloopsize > 0 i

Na przykład

// 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
 });

jest tylko pojedynczym źródłem danych . Może to być JSON, JSFunction, XML, a nawet pojedynczy element HTML

Tutaj możesz zobaczyć prosty tutorial, dostarczony przeze mnie. Be aware no other DATA_TABLE pluglin supports pojedyncze i podwójne kliknięcie w tym samym czasie. Yui DataTable pozwala. I więcej, możesz go używać nawet z JQuery bez bólu głowy

Kilka przykładów można zobaczyć

• pozycja listy

Zapraszam do pytania o cokolwiek innego chcesz o Yui DataTable.

Pozdrawiam,

Trochę nie widzę sensu, dla jqGrid można użyć funkcji wirtualnego przewijania:

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

Ale z drugiej strony można zrobić miliony wierszy z filtrowaniem:

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

Naprawdę nie widzę sensu "jakby nie było stron", mam na myśli... nie ma możliwości wyświetlenia 1 000 000 wierszy na raz w przeglądarce - jest to 10MB HTML raw, trochę nie rozumiem, dlaczego użytkownicy nie chcieliby zobaczyć stron.

W każdym razie...

Najlepsze podejście, jakie mogłem wymyślić, to Ładowanie fragmentu danych w formacie json dla każdego przewijania lub jakiegoś limitu przed zakończeniem przewijania. json może być łatwo konwertowany na obiekty, dzięki czemu wiersze tabeli mogą być konstruowane w prosty sposób

Gorąco polecam Open rico. Jest to trudne do wdrożenia na początku, ale po złapaniu go nigdy nie obejrzysz się za siebie.

Wiem, że to pytanie ma kilka lat, ale jqgrid obsługuje teraz wirtualne przewijanie:

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

Ale z wyłączoną paginacją

Proponuję sigma grid, sigma grid ma wbudowane funkcje stronicowania, które mogą obsługiwać miliony wierszy. Ponadto możesz potrzebować zdalnego stronicowania, aby to zrobić. zobacz demo http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

Spójrz na dGrid:

Http://dojofoundation.org/packages/dgrid/

Zgadzam się, że użytkownicy nigdy, przenigdy nie będą musieli oglądać milionów wierszy danych naraz, ale dGrid może je szybko wyświetlić(po jednym ekranie).

Nie gotuj oceanu, aby zrobić filiżankę herbaty.