如何将“原始”行数据加载到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网格中

回答

相关问题