ag-grid-community: Modelo de linha infinita para paginação do lado do servidor, versão gratuita da comunidade agGrid -Não funciona como paginação do lado do servidor

Nov 26 2020

Eu gastei um bom tempo nisso para entender e implementar, mas parece que a documentação não foi escrita de forma muito clara ou não estou conseguindo entender alguma coisa básica.

Usando ag-grid-community 22.1.1, não é possível alterar muitos códigos de back-end, portanto, sugestões para alterações no back-end não funcionariam. A melhor opção que pude ver é o modelo de linha infinita, conforme explicado. documentação oficial ag-grid

De acordo com a imagem acima, se minha API de back-end estiver lenta e retornar dados lentamente, o que não posso ajudar muito porque, por sua vez, chamar alguma API externa fora do meu controle retorna respostas lentas.

  1. A grade chama a API de back-end que retorna 500 registros em 200 segundos.
  2. O usuário precisa esperar mais de 3 minutos para ver os dados na tela.
  3. Com base no modelo de linhas infinitas, pensei que após a implementação se cacheBlockSizefosse 50, eu poderia pedir ao servidor para enviar 50 registros e a resposta para ver os dados na grade seria mais rápida e quando clicado em seguida, buscará os próximos 50 e o tempo para cada bloco seria ser 20 segundos .
  4. Mas não está funcionando assim, a chamada http backend está esperando que todos os registros voltem e só então começa a renderizar a grade e mostra qualquer resultado, então ainda temos que esperar 200 segundos para ver os dados. Então, de que adianta chamar essa rolagem infinita de lado do servidor?
  5. Além disso, minha implementação está correta, pois pude ver o cursor se movendo nas ferramentas de desenvolvimento do Chrome de 0-50 pela primeira vez e depois de 50-100

Respostas

rateLess Nov 27 2020 at 23:27

Você escreveu que não pode alterar muito código de back-end, então não tenho certeza se você pode fazer algo assim, mas terá que definir um datasourceobjeto com getRows()pelo menos. Esse retorno de chamada será chamado toda vez que a grade tentar buscar novas linhas do servidor, e leva os parâmetros vistos aqui .

Quando esse retorno de chamada for acionado, você terá que chamar sua Promisefunção, que recupera seus dados com o params.startRowparâmetro, e params.endRowou o cacheBlockSizeque é 50, como você diz.

Se a busca for bem-sucedida, você chama successCallback(rowsRetrievedOnThisFetch, lastRow), onde lastRowestá o índice da última linha de seus dados se todos os seus dados estiverem na grade . Se nem todos os dados é na grade ainda, conjunto lastRowigual a undefined, nullou -1.

Mais tarde, quando todas as 500 linhas estiverem carregadas, você pode definir lastRow = 500e chamar successCallback(rowsRetrievedOnThisFetch, 500).

Isso funciona se você puder buscar dados em blocos, em vez de todos de uma vez. Cada vez que você chama a função fetch, você terá que especificar o intervalo de linhas que deseja buscar do banco de dados. Mas você só pode fazer isso se sua API oferecer suporte.

Além disso, ao usar o modelo de linha infinita, a grade não filtrará ou classificará as linhas por conta própria. Você terá que passar params.filterModele params.sortModelrespectivamente em sua consulta quando getRows()disparar se quiser usar a filtragem e classificação do lado do servidor.


ATUALIZAR

Dê uma olhada neste exemplo: https://plnkr.co/edit/pqBAS1cnjKiBoqeQ. Ele carrega 500 linhas em lotes de 50. Cada vez que você rola para baixo, as próximas 50 linhas são carregadas até que todas as 500 estejam na grade.