ag-grid-community : 서버 측 페이지 매김을위한 무한 행 모델, 커뮤니티 무료 버전 agGrid-서버 측 페이지 매김처럼 작동하지 않음
나는 이것에 대해 이해하고 구현하기 위해 충분한 시간을 보냈지 만 문서가 매우 명확하게 작성되지 않았거나 기본적인 것을 이해하지 못하는 것 같습니다.
ag-grid-community 22.1.1을 사용하면 많은 백엔드 코드를 변경할 수 없으므로 백엔드 변경에 대한 제안이 작동하지 않습니다. 내가 볼 수있는 가장 좋은 옵션은 설명대로 무한 행 모델입니다. ag-grid 공식 문서
위의 그림에 따라 내 백엔드 API가 느리고 데이터를 느리게 반환하는 경우 제어 외부의 일부 외부 API를 호출하여 느린 응답을 반환하기 때문에 많은 도움이되지 않습니다.
- Grid는 200 초에 500 개의 레코드를 반환하는 백엔드 API를 호출합니다.
- 사용자는 화면에서 데이터를 보려면 3 분 이상 기다려야합니다.
- 무한 행 모델을 기반으로 구현 후
cacheBlockSize50 개이면 서버에 50 개의 레코드를 보내도록 요청할 수 있으며 그리드의 데이터를 보는 응답이 더 빨라지고 다음에 클릭하면 다음 50 개를 가져오고 각 블록에 대한 시간이 20 초 입니다. - 그러나 그렇게 작동하지 않습니다. 백엔드 http 호출은 모든 레코드가 돌아올 때까지 기다린 다음 그리드 렌더링을 시작하고 결과를 표시하므로 데이터를 보려면 200 초를 기다려야합니다. 그렇다면이 무한 스크롤링을 서버 측이라고 부르는 이유는 무엇입니까?
- 또한 크롬 개발 도구에서 커서가 0-50에서 처음으로 이동 한 다음 50-100으로 이동하는 것을 볼 수 있으므로 내 구현이 정확합니다.
답변
백엔드 코드를 많이 변경할 수 없다고 작성 했으므로 이와 같은 작업을 수행 할 수 있는지 확실하지 않지만 최소한 a로 datasource객체 를 정의해야 합니다 getRows(). 이 콜백은 그리드가 서버에서 새 행을 가져 오려고 할 때마다 호출되며 여기에 표시된 매개 변수를 사용 합니다 .
이 콜백 화재, 당신은 당신의 전화를해야 할 때 Promise하여 데이터를 검색하는 기능 params.startRow매개 변수 및 중 하나 params.endRow또는 cacheBlockSize50 인 당신이 말한대로입니다.
(가) 성공적으로 가져 오는 경우에, 당신은 전화 successCallback(rowsRetrievedOnThisFetch, lastRow)경우, lastRow데이터의 마지막 행의 인덱스 모든 데이터 그리드에있는 경우 . 모든 데이터가 아직 격자 인 경우, 세트 lastRow와 동일한 undefined, null또는 -1.
나중에 500 개 행이 모두로드되면을 설정 lastRow = 500하고 호출 할 수 있습니다 successCallback(rowsRetrievedOnThisFetch, 500).
한 번에 모두가 아닌 블록으로 데이터를 가져올 수 있으면 작동합니다. fetch 함수를 호출 할 때마다 데이터베이스에서 가져올 행 범위를 지정해야합니다. 하지만 API가이를 지원하는 경우에만 그렇게 할 수 있습니다.
또한 무한 행 모델을 사용할 때 그리드는 자체적으로 행을 필터링하거나 정렬하지 않습니다. 서버 측 필터링 및 정렬을 사용하려면 실행 시 쿼리에서 params.filterModel및 params.sortModel각각 을 전달해야 getRows()합니다.
최신 정보
이 예를 살펴보십시오. https://plnkr.co/edit/pqBAS1cnjKiBoqeQ. 500 개 행을 50 개씩 일괄로드합니다. 아래로 스크롤 할 때마다 500 개 행이 모두 그리드에있을 때까지 다음 50 개 행이로드됩니다.