ag-grid-community: Infinite Row Model for Server Side Pagination, Community Free Version agGrid - Nie działa jak paginacja po stronie serwera
Spędziłem nad tym wystarczająco dużo czasu, aby zrozumieć i wdrożyć, ale wydaje się, że albo dokumentacja nie jest napisana zbyt jasno, albo nie rozumiem jakiejś podstawowej rzeczy.
Używając ag-grid-community 22.1.1, nie można zmienić wielu kodów zaplecza, więc sugestie dotyczące zmian w zapleczu nie zadziałają. Najlepszą opcją, jaką widziałem, jest model nieskończonego rzędu, jak wyjaśnili. oficjalna dokumentacja ag-grid
Jak na powyższym obrazku, jeśli moje zaplecze API jest wolne i zwraca dane powoli, na co nie mogę wiele pomóc, ponieważ z kolei wywołuje zewnętrzne API poza moją kontrolą, zwraca wolne odpowiedzi.
- Grid wywołuje interfejs API zaplecza, który zwraca 500 rekordów w ciągu 200 sekund.
- Użytkownik musi czekać ponad 3 minuty, aby zobaczyć jakiekolwiek dane na ekranie.
- Opierając się na modelu nieskończonych wierszy pomyślałem, że po wdrożeniu, jeśli
cacheBlockSizewynosi 50, to mógłbym poprosić serwer o wysłanie 50 rekordów i odpowiedź, aby zobaczyć dane na siatce, będzie szybsza i po następnym kliknięciu pobierze kolejne 50 i czas na każdy blok będzie być 20 sekund . - Ale to nie działa w ten sposób, wywołanie http zaplecza czeka na powrót wszystkich rekordów, a dopiero potem zaczyna renderować siatkę i wyświetlać dowolny wynik, więc nadal trzeba czekać 200 sekund, aby zobaczyć jakiekolwiek dane. Jaki jest więc sens nazywania tego nieskończonego przewijania po stronie serwera?
- Ponadto moja implementacja jest poprawna, ponieważ mogłem zobaczyć, jak kursor przesuwa się w narzędziach programistycznych Chrome za pierwszym razem od 0-50, a następnie 50-100
Odpowiedzi
Napisałeś, że nie możesz zmienić dużo kodu zaplecza, więc nie jestem pewien, czy możesz zrobić coś takiego, ale będziesz musiał zdefiniować datasourceobiekt z getRows()co najmniej. To wywołanie zwrotne będzie wywoływane za każdym razem, gdy grid spróbuje pobrać nowe wiersze z serwera i przyjmuje parametry widoczne tutaj .
Kiedy to wywołanie zwrotne zostanie uruchomione, będziesz musiał wywołać swoją Promisefunkcję, która pobiera dane z params.startRowparametrem, i albo, params.endRowalbo, cacheBlockSizektóry wynosi 50, jak mówisz.
Jeśli pobieranie się powiedzie, wywołujesz successCallback(rowsRetrievedOnThisFetch, lastRow), gdzie lastRowjest indeks ostatniego wiersza danych, jeśli wszystkie dane znajdują się w siatce . Jeśli nie wszystkie dane są w sieci jeszcze, zestaw lastRowrównym undefined, nulllub -1.
Później, po załadowaniu wszystkich 500 wierszy, możesz ustawić lastRow = 500i wywołać successCallback(rowsRetrievedOnThisFetch, 500).
Działa to, jeśli możesz pobierać dane w blokach, a nie wszystkie naraz. Za każdym razem, gdy wywołujesz funkcję pobierania, musisz określić zakres wierszy, które chcesz pobrać z bazy danych. Ale możesz to zrobić tylko wtedy, gdy twój interfejs API to obsługuje.
Ponadto podczas korzystania z modelu nieskończonych wierszy siatka sama nie filtruje ani nie sortuje wierszy. Będziesz musiał przejść params.filterModeli params.sortModelodpowiednio w zapytaniu kiedy getRows()pożary jeśli chcesz użyć po stronie serwera filtrowania i sortowania.
AKTUALIZACJA
Spójrz na ten przykład: https://plnkr.co/edit/pqBAS1cnjKiBoqeQ. Ładuje 500 wierszy w partiach po 50. Za każdym razem, gdy przewijasz w dół, ładowanych jest kolejnych 50 wierszy, aż wszystkie 500 znajdą się w siatce.