Блог

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

Используя ag-grid-community 22.1.1, невозможно изменить много серверного кода, поэтому предложения по изменению на серверной части не будут работать. Лучший вариант, который я мог видеть, — это модель бесконечной строки, как они объяснили.официальная документация ag-grid

Как показано на рисунке выше, если мой серверный API работает медленно и медленно возвращает данные, что я не могу сильно помочь, потому что он, в свою очередь, вызывает какой-то внешний API вне моего контроля, возвращает медленные ответы.

1. Grid вызывает серверный API, который возвращает 500 записей за 200 секунд.
2. Пользователю необходимо подождать более 3 минут, чтобы увидеть какие-либо данные на экране.
3. Основываясь на модели бесконечной строки, я подумал, что после реализации if cacheBlockSize равно 50, я мог бы попросить сервер отправить 50 записей, и ответ на просмотр данных в сетке будет быстрее, и при следующем нажатии он получит следующие 50, а время для каждого блока будет составлять 20 секунд.
4. Но это так не работает, серверный http-вызов ожидает возврата всех записей, и только тогда он начинает отображать сетку и показывает любой результат, поэтому все равно нужно подождать 200 секунд, чтобы увидеть какие-либо данные. Так какой смысл называть эту бесконечную прокрутку серверной стороной?
5. Кроме того, моя реализация верна, поскольку я мог видеть, как курсор перемещается в chrome dev tools с 0-50 в первый раз, а затем 50-100

Вы написали, что вы не можете изменить много серверного кода, поэтому я не уверен, сможете ли вы сделать что-то подобное, но вам нужно будет определить datasource объект getRows() как минимум с помощью. Этот обратный вызов будет вызываться каждый раз, когда grid пытается получить новые строки с сервера, и он принимает параметры, указанные здесь.

Когда срабатывает этот обратный вызов, вам нужно будет вызвать вашу Promise функцию, которая извлекает ваши данные с params.startRow параметром, и либо params.endRow или cacheBlockSize , который равен 50, как вы говорите.

Если выборка прошла успешно, вы затем вызываете successCallback(rowsRetrievedOnThisFetch, lastRow) , где lastRow индекс последней строки ваших данных, если все ваши данные находятся в сетке. Если в сетке еще не все данные, установите lastRow значение равным undefined , null , или -1 .

Позже, когда все 500 строк будут загружены, вы можете установить lastRow = 500 и вызвать successCallback(rowsRetrievedOnThisFetch, 500) .

Это работает, если вы можете извлекать данные по блокам, а не все сразу. Каждый раз, когда вы вызываете функцию выборки, вам нужно указать диапазон строк, которые вы хотите извлечь из базы данных. Но вы можете сделать это, только если ваш API поддерживает это.

Кроме того, при использовании модели бесконечных строк сетка не будет фильтровать или сортировать строки самостоятельно. Вам нужно будет передать params.filterModel и params.sortModel соответственно в вашем запросе при getRows() срабатывании, если вы хотите использовать фильтрацию и сортировку на стороне сервера.

Обновить

Взгляните на этот пример: https://plnkr.co/edit/pqBAS1cnjKiBoqeQ . Он загружает 500 строк партиями по 50. Каждый раз, когда вы прокручиваете вниз, загружаются следующие 50 строк, пока все 500 не окажутся в сетке.