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


Dynamically load server side data into slickgrid using ajax

我现在有成千上万条或数据库记录。由于内存限制,我无法一次性加载所有这些记录。

因此,我打算做的是,使用ajax请求请求1000条记录,并将其加载到slickgrid中,然后在后台以相同的方式逐步加载其他记录,直到加载完所有数据(比如50000条记录)。

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

我看过ajax示例:

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

然而,它并不能满足我的动态加载需求。

我的问题是,这可以很容易地完成吗?如果可以,我需要考虑哪些slickgrid函数。

第一响应

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响应进行所有数据检索除了web工作者中的第一个,这样你就不会阻止uihttps://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

您将不得不使用vanilla-js来使ajax请求没有jQuery。在您的worker中,只需构建一个对象数组,然后在最后的响应中将其发布回主线程

self.postMessage(yourobjectarray);

注意,我有这一切工作,但不是开源的。可以共享更多的代码片段,但不能发布整个