使用ajax将服务器端数据动态加载到slickgrid中

Question

我的情况是数千或数据库记录。由于内存限制，我无法一次性加载所有这些记录。

所以我打算做的是，使用ajax请求请求1000条记录并将其加载到slickgrid中，然后在后台以相同的方式逐步加载其他记录，直到所有数据都被加载（比方说） 50,000条记录）。

应加载前1000条记录，并在后台添加后续记录。这样，即使完整数据集尚未完成加载，用户也可以初始开始过滤，排序等。

我看过ajax的例子：

  

http://mleibman.github.io/SlickGrid/examples/example6-ajax-loading.html

但是，它并没有解决我的动态加载要求。

我的问题是，这是否可以轻松完成，如果是这样，我需要考虑的是什么是slickgrid函数。

Answer 1

第一反应

dataView = new Slick.Data.DataView({});
dataView.beginUpdate();
dataView.setItems(yourjsondata);            
dataView.endUpdate();

加载前1000条记录

由于你没有id列，你可以迭代响应并添加一个uuid或只是增加一个计数器并添加我也没有id和那个我在处理它的方式

所有其他ajax回复

dataView.beginUpdate();

for(var i = 0;  i < yourjsondata.length; i++) {
    dataView.setItem(yourjsondata[i]);            
}

dataView.endUpdate();

我强烈建议对所有ajax响应进行所有数据检索 除了网络工作者中的第一个，所以你不要阻止ui https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

你必须使用vanilla js来制作ajax请求而不是jQuery。在你的工作者中只需构建一个对象数组，然后在最后的响应中将其发送回主线程

self.postMessage(yourobjectarray);

注意我这一切都有效，但不是开源的。可以分享更多的代码片段但不能发布整个事情