Muszę przedstawić dużą liczbę wierszy danych (tj. Miliony wierszy) użytkownikowi w siatce za pomocą JavaScript.
Użytkownik nie powinien widzieć stron ani przeglądać tylko skończonych ilości danych naraz.
Powinno się raczej wydawać, że wszystkie dane są dostępne.
Zamiast pobierać dane naraz, pobierane są małe fragmenty, gdy użytkownik do nich podchodzi (np. Przewijając siatkę).
Wiersze nie będą edytowane przez ten interfejs, więc siatki tylko do odczytu są dopuszczalne.
Jakie siatki danych napisane w JavaScript istnieją dla tego rodzaju bezproblemowego stronicowania?
Odpowiedzi:
( Uwaga: Jestem autorem SlickGrid )
AKTUALIZACJA To zostało zaimplementowane w SlickGrid .
Zapoznaj się z http://github.com/mleibman/SlickGrid/issues#issue/22, aby uzyskać ciągłą dyskusję na temat usprawnienia pracy SlickGrid z większą liczbą wierszy.
Problem polega na tym, że SlickGrid nie wirtualizuje samego paska przewijania - wysokość obszaru przewijanego jest ustawiona na całkowitą wysokość wszystkich wierszy. Wiersze są nadal dodawane i usuwane, gdy użytkownik przewija, ale samo przewijanie jest wykonywane przez przeglądarkę. Dzięki temu może być bardzo szybki, ale płynny (zdarzenia onscroll są notorycznie wolne). Zastrzeżenie polega na tym, że w silnikach CSS przeglądarki występują błędy / ograniczenia, które ograniczają potencjalną wysokość elementu. W przypadku IE jest to 0x123456 lub 1193046 pikseli. W przypadku innych przeglądarek jest on wyższy.
W gałęzi „largenum-fix” występuje eksperymentalne obejście, które znacznie podnosi ten limit, wypełniając obszar przewijalny „stronami” ustawionymi na wysokość 1M pikseli, a następnie stosując względne pozycjonowanie na tych stronach. Ponieważ limit wysokości w silniku CSS wydaje się inny i znacznie niższy niż w silniku rzeczywistego układu, daje nam to znacznie wyższy górny limit.
Wciąż szukam sposobu na uzyskanie nieograniczonej liczby wierszy bez rezygnacji z przewagi wydajności, jaką SlickGrid obecnie ma nad innymi implementacjami.
Rudiger, czy możesz wyjaśnić, w jaki sposób to rozwiązałeś?
źródło
https://github.com/mleibman/SlickGrid/wiki
„ SlickGrid wykorzystuje wirtualny rendering, aby umożliwić ci łatwą pracę z setkami tysięcy elementów bez spadku wydajności. W rzeczywistości nie ma różnicy w wydajności pomiędzy pracą z siatką z 10 rzędami w porównaniu do 100'000 wierszy ”.
Niektóre najważniejsze:
To nic nie kosztuje (licencja MIT). Korzysta z jQuery.
źródło
data.length = Math.min(131000, parseInt(resp.total));
... I, oczywiście, zakodowany z jakiegoś powodu :(data
tablicy. To kludge, ale mam odpowiedzi wypełniającebigdata
tablicę, a mniejszedata
ciągnie zbigdata
tablicy. Reszta programu używa mniejszej tablicy danych, z wyjątkiem pomiaru paska przewijania i kilku innych miejsc, które są teraz nieograniczone dla dużej liczby wierszy. Podsumowując, było to o wiele łatwiejsze niż pisanie własnych.Najlepsze siatki według mnie są poniżej:
Moje najlepsze 3 opcje to jqGrid, jqxGrid i DataTables. Mogą pracować z tysiącami wierszy i obsługiwać wirtualizację.
źródło
Nie chcę rozpętać wojny z płomieniem, 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 są w stanie wyświetlić nawet milionów rekordów w jakikolwiek znaczący sposób. Mogą powiedzieć, że chcą zobaczyć miliony płyt, ale to po prostu głupie. Poproś najmądrzejszych badaczy o wykonanie podstawowej matematyki: Załóż, że spędzają 1 sekundę na oglądaniu każdego rekordu. Przy takim tempie zajmie to 1000000 sekund, co wydłuży się do ponad sześciu tygodni (40 godzin tygodni pracy bez przerw na jedzenie lub toaletę).
Czy oni (lub ty) poważnie sądzicie, że jedna osoba (ta, która patrzy na siatkę) może zmobilizować tego rodzaju koncentrację? Czy naprawdę robią dużo w ciągu 1 sekundy, czy też (bardziej prawdopodobne) odfiltrowują rzeczy, których nie chcą? Podejrzewam, że po obejrzeniu podzbioru „rozsądnej wielkości” mogą opisać filtr, który automatycznie odfiltruje te rekordy.
Jak sugerowali również paxdiablo, Sleeper Smith i Lasse V Karlsen, ty (i oni) nie przemyślałeś wymagań. Z drugiej strony, odkąd znalazłeś SlickGrid, jestem pewien, że potrzeba tych filtrów stała się natychmiast oczywista.
źródło
Ctrl+F
. Alternatywa (stronicowanie, wyszukiwanie w witrynie internetowej) jest znacznie gorsza. Wystarczy spojrzeć na StackOverflow podczas próby przewijania pytań lub odpowiedzi, Reddit do przewijania historii komentarzy użytkownika. Sortowanie i natychmiastowe wyszukiwanie zapewniają moc, jaką ma Eksplorator Windows, ale brakuje stron internetowych.Mogę powiedzieć z całkiem dobrą pewnością, że naprawdę nie musisz pokazywać użytkownikowi milionów wierszy danych.
Nie ma na świecie użytkownika, który byłby w stanie zrozumieć ten zestaw danych lub nim zarządzać, więc nawet jeśli uda ci się go technicznie usunąć, nie rozwiążesz żadnego znanego problemu dla tego użytkownika.
Zamiast tego skupiłbym się na tym, dlaczego użytkownik chce zobaczyć dane. Użytkownik nie chce widzieć danych tylko po to, aby zobaczyć dane, zwykle zadawane jest pytanie. Jeśli zamiast tego skoncentrujesz się na udzieleniu odpowiedzi na te pytania, będziesz znacznie bliżej rozwiązania rzeczywistego problemu.
źródło
Polecam Ext JS Grid z funkcją Buffered View.
http://www.extjs.com/deploy/dev/examples/grid/buffer.html
źródło
(Uwaga: Jestem autorem w2ui)
Niedawno napisałem artykuł o implementacji siatki JavaScript z 1 milionem rekordów ( http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records ). Odkryłem, że ostatecznie istnieją 3 ograniczenia, które uniemożliwiają podniesienie go:
Testowałem siatkę z 1 milionem rekordów (oprócz IE) i działa ona dobrze. Zobacz artykuł na dema i przykłady.
źródło
dojox.grid.DataGrid oferuje abstrakcję JS dla danych, dzięki czemu można podłączyć ją do różnych backendów za pomocą udostępnionych sklepów dojo.data lub napisać własny. 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 zapewnić potrzebny przykład, przeglądając miliony rekordów za pomocą dojox.grid. Zauważ, że używa starej wersji siatki, ale koncepcje są takie same, wprowadzono tylko kilka niekompatybilnych ulepszeń API.
Aha, i to całkowicie darmowe oprogramowanie typu open source.
źródło
użyłem wtyczki jQuery Grid , było miło.
Dema
źródło
Oto kilka optymalizacji, które możesz zastosować, aby przyspieszyć działanie. Po prostu myślę głośno.
Ponieważ liczba wierszy może być w milionach, potrzebny będzie system buforowania tylko dla danych JSON z serwera. Nie wyobrażam sobie, że ktoś chciałby pobrać wszystkie X milionów elementów, ale gdyby to zrobił, byłby to problem. Ten mały test w Chrome dla tablicy na liczbach całkowitych 20 M + stale się zawiesza na moim komputerze.
Możesz użyć LRU lub innego algorytmu buforowania i mieć górną granicę ilości danych, które chcesz buforować.
Myślę, że w przypadku samych komórek tabeli budowanie / 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 przewinie do nowej pozycji, wstrzyknij dane JSON do tych komórek. Pasek przewijania nie miałby praktycznie żadnego bezpośredniego związku z ilością miejsca (wysokości) wymaganego do przedstawienia całego zestawu danych. Możesz dowolnie ustawić wysokość kontenera tabeli, powiedzmy 5000px, i odwzorować ją na całkowitą liczbę wierszy. Na przykład, jeśli wysokość kontenerów wynosi 5000 pikseli, a w sumie jest 10 mln wierszy, to
starting row ≈ (scroll.top/5000) * 10M
gdziescroll.top
oznacza odległość przewijania od góry kontenera. Małe demo tutaj .Aby wykryć, kiedy zażądać więcej danych, najlepiej obiekt powinien działać jako mediator, który nasłuchuje przewijanych zdarzeń. Ten obiekt śledzi szybkość przewijania przez użytkownika, a gdy wygląda na to, że użytkownik zwalnia lub całkowicie się zatrzymał, wysyła żądanie danych dla odpowiednich wierszy. Odzyskiwanie danych w ten sposób oznacza, że dane zostaną pofragmentowane, dlatego pamięć podręczna powinna być zaprojektowana z myślą o tym.
Ważną rolę mogą również odgrywać ograniczenia przeglądarki dotyczące maksymalnej liczby połączeń wychodzących. Użytkownik może przewinąć do określonej pozycji, która uruchomi żądanie AJAX, ale zanim to się skończy, użytkownik może przewinąć do innej części. Jeśli serwer nie reaguje wystarczająco, żądania zostaną umieszczone w kolejce, a aplikacja nie będzie odpowiadać. Możesz użyć menedżera żądań, przez który wszystkie żądania są kierowane, i może anulować oczekujące żądania, aby zwolnić miejsce.
źródło
Wiem, że to stare pytanie, ale wciąż… Istnieje również dhtmlxGrid, który może obsłużyć miliony wierszy. Istnieje demo z 50 000 wierszy, ale liczba wierszy, które można załadować / przetworzyć w siatce, jest nieograniczona.
Oświadczenie: Jestem z zespołu DHTMLX.
źródło
Sugeruję przeczytanie tego
http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/
źródło
Oświadczenie: intensywnie używam YUI DataTable przez długi czas bez bólu głowy . Jest mocny i stabilny. Do swoich potrzeb możesz użyć ScrollingDataTable, który obsługuje
Myślę, że tym, czego potrzebujesz, jest tableScrollEvent . Jego interfejs API mówi
Ponieważ każdy DataTable korzysta z DataSource, możesz monitorować jego dane poprzez tableScrollEvent wraz z wielkością pętli renderowania , aby wypełnić ScrollingDataTable zgodnie z Twoimi potrzebami.
Rozmiar pętli renderowania mówi
Na przykład
<WHERE_DOES_THE_DATA_COME_FROM> to tylko jedno źródło danych . Może to być JSON, JSFunction, XML, a nawet pojedynczy element HTML
Tutaj możesz zobaczyć Prosty samouczek, dostarczony przeze mnie. Pamiętaj, że żadna inna wtyczka DATA_TABLE nie obsługuje pojedynczego i podwójnego kliknięcia jednocześnie. YUI DataTable pozwala. Co więcej, możesz go używać nawet z JQuery bez bólu głowy
Niektóre przykłady, możesz zobaczyć
Nie wahaj się pytać o wszystko, co chcesz o YUI DataTable.
pozdrowienia,
źródło
W pewnym sensie nie widzę sensu, w przypadku jqGrid możesz użyć funkcji wirtualnego przewijania:
http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling
ale z drugiej strony można wykonać miliony wierszy z filtrowaniem:
http://www.trirand.net/aspnetmvc/grid/performancelinq
Naprawdę nie rozumiem sensu „tak jakby nie było stron”, to znaczy… nie ma sposobu na wyświetlenie 1 000 000 wierszy w przeglądarce - to jest 10 MB surowego kodu HTML, w pewnym sensie nie widzę dlaczego użytkownicy nie chcą widzieć stron.
Tak czy siak...
źródło
najlepszym podejściem, jakie mogłem wymyślić, jest ładowanie fragmentu danych w formacie json dla każdego przewijania lub pewnego limitu przed zakończeniem przewijania. json można łatwo przekonwertować na obiekty, dzięki czemu wiersze tabeli można łatwo i dyskretnie konstruować
źródło
Gorąco polecam Open rico . Na początku trudno go wdrożyć, ale kiedy go złapiesz, nigdy nie będziesz oglądać się za siebie.
źródło
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ą
źródło
Sugeruję sigma grid, sigma grid ma wbudowane funkcje stronicowania, które mogłyby obsługiwać miliony wierszy. Aby to zrobić, możesz potrzebować zdalnego stronicowania. zobacz wersję demonstracyjną http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html
źródło
Spójrz na dGrid:
https://dgrid.io/
Zgadzam się, że użytkownicy NIGDY, KIEDYKOLWIEK nie będą musieli przeglądać milionów wierszy danych naraz, ale dGrid może je wyświetlić szybko (ekranowo za jednym razem).
Nie gotuj oceanu, aby zrobić filiżankę herbaty.
źródło