用于数百万行的JavaScript数据网格

我需要使用JavaScript在网格中向用户呈现大量数据行（即数百万行）

用户不应该一次只查看页面或有限数量的数据

相反，似乎所有的数据都是可用的

不是一次下载所有数据，而是在用户到达时下载小块数据（即通过滚动网格）

这些行将不会通过该前端进行编辑，因此只读网格是可以接受的

有哪些用JavaScript编写的数据网格可以实现这种无缝分页？

我用过，很不错

---

我能想到的最佳方法是，在滚动结束之前，为每个滚动或某些限制加载json格式的数据块。json可以很容易地转换为对象，因此表行可以很容易地以不引人注目的方式构造

我建议使用带有缓冲视图功能的ExtJS网格

“SlickGrid利用虚拟渲染，使您能够轻松处理数十万个项目，而不会降低性能。事实上，处理10行网格与处理10万行网格在性能上没有区别。”

一些亮点：

• 自适应虚拟滚动（处理数十万行）
• 极快的渲染速度
• 丰富单元的背景后期渲染
• 可配置和定制
• 全键盘导航
• 列大小调整/重新排序/显示/隐藏
• 柱自动调整尺寸和强制配合
• 可插入单元格式化程序和编辑器
• 支持编辑和创建新行。” 借

它是免费的（麻省理工学院许可证）。

---

它使用jQuery。

这里有几个优化，你可以应用它们来加速事情的发展。只要大声思考就可以了

由于行数可能达到数百万，因此您需要一个缓存系统，仅用于服务器上的JSON数据。我无法想象有人想要下载所有X百万项，但如果他们下载了，这将是一个问题。在Chrome上，对于一个包含20M+整数的数组，这会在我的机器上不断崩溃

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);​

var数据=[]；
对于（变量i=0；i<20000000；i++）{
数据推送（i）；
}
console.log（data.length）；​

您可以使用或其他一些缓存算法，并对您愿意缓存的数据量有一个上限

对于表单元格本身，我认为构建/销毁DOM节点可能会很昂贵。相反，您可以预先定义X个单元格，并且每当用户滚动到新位置时，将JSON数据注入这些单元格。滚动条实际上与空间大小（高度）没有直接关系表示整个数据集所需的。您可以任意设置表容器的高度，例如5000px，并将其映射到总行数。例如，如果容器高度为5000px，共有10M行，则

起始行≈ （scroll.top/5000）*10M

其中

scroll.top

表示从容器顶部的滚动距离

若要检测何时请求更多数据，理想情况下，对象应充当侦听滚动事件的中介。此对象跟踪用户滚动的速度，并在用户看起来正在减速或已完全停止时，对相应的行发出数据请求。以这种方式检索数据意味着您的数据是g因为它是碎片化的，所以缓存的设计应该考虑到这一点

---

此外，浏览器对最大传出连接数的限制也起到了重要作用。用户可能会滚动到某个位置，从而触发AJAX请求，但在该位置完成之前，用户可以滚动到其他部分。如果服务器响应不够，请求将排队，应用程序将看起来没有响应您将使用一个请求管理器，通过它可以路由所有请求，并且它可以取消挂起的请求以腾出空间。

免责声明：我大量使用，长时间不头痛。。它功能强大且稳定。根据您的需要，您可以使用wich支持

• x-滚动
• y形滚动
• xy滚动
• 强大的事件机制

对于您需要的，我想您需要的是一个TableScrolleEvent

当固定滚动数据表具有滚动时激发

由于每个数据表都使用一个数据源，您可以通过TablesCrolleEvent以及渲染循环大小来监控其数据，以便根据需要填充滚动数据表

渲染循环大小表示

如果DataTable需要显示一组非常大的数据，renderLoopSize配置可以帮助管理浏览器DOM呈现，以便UI线程不会锁定在非常大的表上。。任何大于0的值都会导致在setTimeout（）中执行DOM呈现在每个循环中呈现指定行数的链。理想值应由每个实现确定，因为没有硬性规则，只有一般准则：

• 默认情况下，renderLoopSize为0，因此所有行都在单个循环中渲染。renderLoopSize>0会增加开销，因此请仔细使用
• 如果您的数据集足够大（行数X列数X格式复杂性），用户在可视化渲染中会遇到延迟和/或导致脚本挂起，请考虑设置renderLoopSize
• renderLoopSize低于50可能不值得。renderLoopSize>100可能更好
• 一个数据集可能被认为不够大，除非它有成百上千的行
• renderLoopSize>0且<总行数确实会导致表在一个循环中呈现（与renderLoopSize=0相同），但它也会触发功能

  // Render 100 rows per loop
   var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
       renderLoopSize:100
   });