프런트 엔드에서 4000 그리드를 사용하여 4000 레코드를 더 빠르게로드하는 방법

Question

메신저를 사용하여 메신저 rowmodeltype은 모든 레코드를로드하면 api 응답에 거의 2-3 분이 걸리므로 서버 쪽에서 페이지 매김을 사용합니다

1. 열 레이블 그룹화 ag 그리드는이를 처리하기위한 백엔드 샘플을 제공하지 않았습니다.
2. 클라이언트 측에서 모든 레코드를로드하면 모든 그리드 기능이 작동하므로 30 컬럼과 40000 레코드로 거의 10MB 크기의 데이터를 빠르게로드 할 수 있습니다.

Answer 1

대부분의 병목 현상은 백엔드 (데이터베이스 검색)에서 발생합니다. 느린 효과를 줄이려면 내가 사용한이 방법을 사용할 수 있습니다.

1. 는 서버 측 페이징
2. 이로드 아약스는 작은 크기 호출 (예를 들어, 상위 400 행) 할 호출 리팩토링 호출을 지원하기위한 백엔드 API를 향상시킬 수 있습니다.
3. 첫 번째로드가 완료되면 더 많은 레코드가 있는지 확인하십시오. 그렇다면 완료 될 때까지 재귀 적로드를 설정하십시오.

이제 나머지 3600 개의 행을로드하는 동안 사용자는 처음 400 개의 행을 볼 수 있습니다. 여기서 진행 상황을 표시하기 위해로드 아이콘을 표시해야합니다.

다음은이 코드를로드하는 데 필요한 코드 샘플입니다.

var myList = []; 

var loadDataFunc = function(start, limit) { 
     _self.Status.IsLoading = true; 

     $http 
      .get(DataUrl + "?start=" + start + "&limit=" + limit) 
      .then(function(response){ 

       if(response && response.data && response.data.List) { 
        if(response.data.Total > 0) { 
         for(var z = 0; z < response.data.List.length; z++) { 
          myList.push(response.data.List[z]); 
         } 

         var currentItemsLoaded = start + response.data.List.length; 
         if(currentItemsLoaded < response.data.Total) { 
          //means we still have pending to load, then we load again! 
          setTimeout(function(){ 
           loadDataFunc(currentItemsLoaded, limit); 
          }, 500); 
         }else { 
          //If it reaches here, it means we have completed loading 
          _self.Status.IsLoading = false; 
          _self.Status.IsLoaded = true; 
         } 
         BindDataToGrid(); 
        } else { 
         _self.Status.IsLoading = false; 
         _self.Status.IsLoaded = true; 
         if(start === 0) { 
          BindDataToGrid(); 
         } 
        } 
       } 
       else { 
        _self.Status.IsLoading = false; 
        _self.Status.IsLoaded = true; 
       } 
      }) 
      .catch(function(response){ 
       _self.Status.IsLoading = false; 
       //error! 
      }); 
    };  

    function BindDataToGrid() { 
     setTimeout(function(){     
      grid.api.setRowData(myList); 
     },100); 
    };