如何將「原始」行數據加載到ag網格中

我正在處理高吞吐量問題。我的目標是至少在Chrome瀏覽器上顯示由1M行組成的網格。如何將「原始」行數據加載到ag網格中

這些行是從運行在同一臺機器上的python服務器動態獲取的。該服務器已經將整個數據集加載到內存中。客戶端（瀏覽器）和服務器（python）之間的通信通過websocket進行。網格有選項virtualPaging: true。

到目前爲止，我達到了一些好的表現，每個頁面加載100行。儘管如此，在開始時加載整個1M數據集（因此不需要遠程獲取行），顯示了滾動的顯着改進（無「白色行」效果）。

我想在不將任何數據集存儲在瀏覽器內存的情況下實現相同的性能。

我會嘗試的第一步是避免一些轉換步驟。客戶端從服務器接收數組陣列，這意味着服務器上的行模型是「位置」（給定r作爲通用行，r[0]是與第一列相關的元素，r[1]到第二列等）。但回調函數AG-網格successCallback，要求對象的數組，這意味着，每行需要與它相關的列名（給定r作爲一個通用的行密鑰，r["firstColumn"]是r["secondColumn"]與第一列中的元件，給第二等等）。

鑑於鍵值機制使用的內存大量浪費，第二種方法對於服務器角度來說是完全不可行的。這導致了客戶端收到的每一頁需要一個本地的轉換：

client.appendCallback("message", function(message){ 
    message = JSON.parse(message.data); 
    switch(message.command) { 
     case "GetRows": 
      if(message.res.code == 0) { 
       var bulk = []; 
       var arr = message.res.data; 
       for (var i = 0, len = arr.length; i < len; i++) { 
        bulk[i] = {"par1" : arr[i][0], "par2" : arr[i][1], "par3" : arr[i][2], "par4" : arr[i][3], "par5" : arr[i][4], "par6" : arr[i][5]}; 
       } 
       _data.successCallback(bulk); 
      } 
      break; 
     default: 
      break; 
    } 
},"ws");

我需要的是一種方式傳遞給successCallback行的陣列，而不是爲避免轉換部分，像這樣的對象：

client.appendCallback("message", function(message){ 
    message = JSON.parse(message.data); 
    switch(message.command) { 
     case "GetRows": 
      if(message.res.code == 0) { 
       _data.successCallback(message.res.data); 
      } 
      break; 
     default: 
      break; 
    } 
},"ws");

任何幫助將不勝感激

來源

2016-02-05 pedro.zena

這個怎麼樣？

修復的像100

中的pageSize由於您使用服務器端分頁您已經實現了自己的數據源：所以，當你問到加載數據：加載[和轉換]像10000行和商店他們在記憶中。

然後使用您自己的中間分頁：每次網格要求下一行時，要麼從內存中獲取它們，要麼獲取下一個10k行，並且[convert和]只返回第1個hundreth。

無論是從服務器加載還是在詢問接下來的100行時，[convert]部分都可以選擇放置轉換操作。

如果數據量很大，並且您考慮不僅在您的本地計算機上部署，角度（或瀏覽器，我真的不知道它在哪裏）透明地支持gzip壓縮數據。

來源

2016-02-08 12:24:20 Walfrat

我明白了你的觀點。但通過這種方式，我仍然在客戶端和服務器之間複製了10k行（在內存中）。此外，在一個小視圖上的滾動動作（例如顯示20行的網格）需要頻繁地讀取10k行。第一個問題增加到10萬。 –

@ pedro.zena如果你想避免很多轉換的東西，你可以使用valueGetter。 https://www.ag-grid.com/angular-grid-value-getters/index.php。因此，對於第一列，您可以定義：valueGetter：function（params）{return params.data [0]}。對於第二次你會返回params.data [1]，.... – Walfrat

如何將「原始」行數據加載到ag網格中

回答

相關問題