如何使用ag網格在前端加載4000條記錄

Question

即時使用ag網格rowmodeltype是企業（服務器端），因爲如果我加載所有記錄，api響應花費時間差不多2-3分鐘，所以使用服務器端分頁

1. 列標籤分組ag網格沒有提供任何後端樣本來處理它。
2. 如果我們加載客戶端的所有記錄所有的ag網格功能工作，所以有什麼辦法可以更快地加載記錄幾乎10mb大小的數據與30列和40000記錄。

Answer 1

大多數瓶頸發生在後端（數據庫檢索）。 爲了減少緩慢的影響，您可以採用我使用的這種方法。

1. 增強您的後端API以支持服務器端分頁調用
2. 重構您加載AJAX調用做一個小型的呼叫（例如頂部400行）。
3. 完成第一次加載後，檢查是否還有更多記錄。如果是，請設置遞歸負載直到完成。

現在，用戶將'看到'前400行，而它仍然加載剩餘的3600行。這是您需要顯示加載圖標以顯示進度的位置。

下面是加載此代碼的示例。

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); 
    };