dhtml xgrid实现前台大数据延迟加载效果

第一步首先是用来展现大数据的前台html页面，当然jsp也可以

其中mygrid.loadXML("smartrend.xml");代表的是加载的数据源，

 

这些是必须要引入的dhtml的js文件，

 

mygrid.enableBuffering(20);最关键的就是该行js

当我们设置了enableBuffering属性的时候，20代表的是当我们显示数据的时候默认第一次加载

的时候显示的是20条记录，如果设置为50第一次加载的时候显示50条记录

 

具体实现的效果如下图所示，

该页面显示的第一次加载的时候显示的数据为20条记录，我们可以通过滑动条就可以看出来。

当我们设置enableBuffering(50);为50时，

我们明显可以看出滑动条变小了。

 

不管我们设置的是20，还是50，当我们往下拖动滑动条的时候，其他需要显示的数据会随着我们拖动而逐渐在页面

的表格中显示。

 

正如下图所示，

dhtmlxgrid帮我们解决了，大数据在前台显示的时候造成前台页面假死的状态，提高了数据的显示效率，因为在不使用延迟加载的时候，

可能10000条数据的显示需要40秒左右，但是设置了enableBuffering属性，我们可以先预先设置30条或者50条数据在第一次加载的时候

显示出来，其他的数据当用户真正需要的时候，也就是拖动滑动条的时候显示出来，这样即增加了页面的友好性，又缩短了数据显示的等待

时间。

 

至于它的实现原理，呵呵，大家可以google下。我也不过多的解释了。

管理本篇博文所需要的js文件，还有用于显示的数据我已经上传到我的资源。