dhtml xgrid 实现前台大数据延迟加载效果
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Smart Rendering</title></head><body><link rel='STYLESHEET' type='text/css' href='../common/style.css'><link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css"><script src="../../codebase/dhtmlxcommon.js"></script><script src="../../codebase/dhtmlxgrid.js"></script><script src="../../codebase/ext/dhtmlxgrid_srnd.js"></script><script src="../../codebase/dhtmlxgridcell.js"></script><table width="600"><tr><td width="50%" valign="top"><div id="gridbox" width="100%" height="250px" style="background-color:white;"></div></td></tr><tr><td> <div id="a_1"></div></td></tr></table><br><script>mygrid = new dhtmlXGridObject('gridbox');mygrid.setImagePath("../../codebase/imgs/");mygrid.setHeader("Order,Index 1,Request info");mygrid.setInitWidths("50,275,250")mygrid.setColAlign("right,left,left")mygrid.setColTypes("ed,ed,ed");mygrid.setColSorting("int,str,str")mygrid.setColumnColor("white,#d5f1ff,#d5f1ff")mygrid.init();mygrid.enableBuffering(20); mygrid.loadXML("smartrend.xml");</script></body></html>
?其中mygrid.loadXML("smartrend.xml");代表的是加载的数据源，
?
?
?
<script src="../../codebase/dhtmlxcommon.js"></script>
?
<script src="../../codebase/dhtmlxgrid.js"></script>
?
<script src="../../codebase/ext/dhtmlxgrid_srnd.js"></script>
?
<script src="../../codebase/dhtmlxgridcell.js"></script>
?
这些是必须要引入的dhtml的js文件，
?
?
?
mygrid.enableBuffering(20);最关键的就是该行js
?
当我们设置了enableBuffering属性的时候，20代表的是当我们显示数据的时候默认第一次加载
?
的时候显示的是20条记录，如果设置为50第一次加载的时候显示50条记录
?
?
?
当我们设置enableBuffering(50);为50时，滑动条变小了。
?
?
?
不管我们设置的是20，还是50，当我们往下拖动滑动条的时候，其他需要显示的数据会随着我们拖动而逐渐在页面的表格中显示。
?
?
?
?
dhtmlxgrid帮我们解决了，大数据在前台显示的时候造成前台页面假死的状态，提高了数据的显示效率，因为在不使用延迟加载的时候，
?
可能10000条数据的显示需要40秒左右，但是设置了enableBuffering属性，我们可以先预先设置30条或者50条数据在第一次加载的时候
?
显示出来，其他的数据当用户真正需要的时候，也就是拖动滑动条的时候显示出来，这样即增加了页面的友好性，又缩短了数据显示的等待
?
时间。
