フロントエンドで4000グリッドを高速に読み込む方法

Question

私はグリッドを使用しています。rowmodeltypeはすべてのレコードをロードすると約2〜3分かかりましたので、サーバ側でページ付けを使用しました。

1. 列ラベルグループ化グリッドでは、それを処理するためのバックエンドサンプルは提供されませんでした。
2. すべてのレコードをクライアント側にロードすると、すべてのグリッドの機能が動作するため、30個のカラムと40000個のレコードを含むほぼ10mbのサイズのデータ​​を高速にロードする方法があります。

Answer 1

ほとんどのボトルネックは、バックエンド（データベースの取得）で発生します。 遅さの影響を減らすために、私が使用したこの方法を採用することができます。

1. サーバー側のページングをサポートするために、バックエンドのAPIを強化あなたの積載アヤックスは、小さなサイズのコール（例えば、トップ400行）を行うために呼び出すリファクタリング
2. 呼び出します。
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); 
    };