日期:2014-05-17  浏览次数:20606 次

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条数据在第一次加载的时候

?

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

?

时间。