快捷導(dǎo)航

Js表格萬條數(shù)據(jù)瞬間加載實(shí)現(xiàn)代碼

更新時間：2014年02月20日 10:10:23 作者：

一條數(shù)據(jù)創(chuàng)建一行，如果數(shù)量大的時候，一次性要加載完數(shù)據(jù)的話，瀏覽器就會卡上半天，下面有個不錯的方法，大家可以參考下

Js表格，萬條數(shù)據(jù)瞬間加載

在Ajax動態(tài)加載數(shù)據(jù)的實(shí)際應(yīng)用中，大家都習(xí)慣了一種思維方式：一條數(shù)據(jù)創(chuàng)建一行。
于是如果數(shù)量大的時候，一次性要加載完數(shù)據(jù)的話，瀏覽器就會卡上半天

受Flex的DataGrid控件的啟發(fā)，在Flex的DataGrid控件中，展示數(shù)據(jù)的方法并不是有多少條數(shù)據(jù)就創(chuàng)建多少行，它最多只創(chuàng)建你在界面上所看到的十幾二十行（假設(shè)為n行），如果數(shù)據(jù)多的話，在滾動過程中，會從數(shù)據(jù)中抽取你應(yīng)該看到的這n行數(shù)據(jù)，重新展示在已經(jīng)創(chuàng)建好的那n行控件中。
也就是說，F(xiàn)lex的DataGrid控件中，我們實(shí)際上看到的僅僅是那n行控件，只是它們展示的數(shù)據(jù)是根據(jù)滾動條狀態(tài)來篩選出來的。

所以，如果在JS中，也用類似的方法實(shí)現(xiàn)，那么就是上萬條數(shù)據(jù)，可能也只要創(chuàng)建幾十個Dom而已，效率自然快得多了。
廢話不多說，上代碼。首先，需要一個滾動條
Scrollbar.js

復(fù)制代碼代碼如下:

 
function Scrollbar() { 
this.options = { 
total : 0, //數(shù)據(jù)總數(shù) 
pos : 0, //當(dāng)前滾動位置 
itemSize : 20, //單項(xiàng)尺寸 
size : 200 //控件尺寸 
}; 
} 
Scrollbar.prototype = (function () { 
function setOptions(options) { 
for (var attr in options) { 
this.options[attr] = options[attr]; 
} 
Refresh(this); 
} 
function Refresh(_this) { 
if (!_this.created) 
return; //設(shè)置控件高度 
_this.bar.style.height = _this.options.size + "px"; 
//設(shè)置內(nèi)容高度 
var ch = _this.options.total * _this.options.itemSize; 
_this.content.style.height = ch + "px"; 
} 
//獲取滾動位置 
function getPos() { 
var top = this.bar.scrollTop; 
var pos = parseInt(top / this.options.itemSize); 
return pos; 
} 
//每頁可展示的數(shù)據(jù)數(shù)量 
function getPageItems() { 
return this.options.size / this.options.itemSize; 
} 
//滾動事件響應(yīng) 
function OnScroll(_this) { 
var pos = _this.getPos(); 
if (pos == _this.options.pos) 
return; 
_this.options.pos = pos; 
_this.onScroll(pos); 
} 
//滾動條創(chuàng)建 
function CreateAt(dom) { 
var _this = this; 
var bar = document.createElement("div"); 
var content = document.createElement("div"); 
bar.appendChild(content); 
bar.style.width = "19px"; 
bar.style.overflowY = "scroll"; 
bar.style.overflowX = "hidden"; 
if (bar.attachEvent) { 
bar.attachEvent("onscroll", function () { 
OnScroll(_this); 
}); 
} else { 
//firefox兼容 
bar.addEventListener("scroll", function () { 
OnScroll(_this); 
}, false); 
} 
content.style.backgroundColor = "white"; 
content.style.width = "1px"; 
this.bar = bar; 
this.content = content; 
if (typeof(dom) == "string") { 
dom = document.getElementById(dom); 
} 
dom.innerHTML = ""; 
dom.appendChild(this.bar); 
this.created = true; 
Refresh(this); 
} 
return { 
setOptions : setOptions, 
CreateAt : CreateAt, 
getPos : getPos, 
getPageItems : getPageItems, 
onScroll : null 
//模擬滾動條事件 
}; 
})(); 

頁面代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 
表格控件 
</title> 
<script src="Scrollbar.js" type="text/javascript"> 
</script> 
<script language="javascript" type="text/javascript"> 
var data = []; 
//創(chuàng)建一萬條示例數(shù)據(jù) 
for (var i = 0; i < 10000; i++) { 
var row = { 
id: i, 
text: "text" + i 
}; 
data.push(row); 
} 
//創(chuàng)建滾動條 
var scrbar = new Scrollbar(); 
window.onload = function() { 
scrbar.CreateAt("divScroll"); 
scrbar.setOptions({ 
total: 10000, 
size: 300 
}); 
scrbar.onScroll = function(pos) { 
ShowData(pos); 
} 
//獲取模板 
var items = scrbar.getPageItems(); 
var tpl = document.getElementById("trTpl"); 
tpl.parentNode.removeChild(tpl); 
//僅創(chuàng)建所看到的幾十行表格，所以自然快得多 
var list = document.getElementById("tblList"); 
for (var i = 0; i < data.length && i < items; i++) { 
var nr = tpl.cloneNode(true); 
//從模板行復(fù)制新行 
list.appendChild(nr); 
} 
ShowData(scrbar.getPos()); 
} 
//根據(jù)滾動條，展示數(shù)據(jù) 
function ShowData(pos) { 
var n = scrbar.getPageItems(); 
var rows = document.getElementById("tblList").rows; 
for (var i = 0; i < n; i++) { 
var row = rows[i]; 
var item = data[i + pos]; 
row.cells["tdID"].innerHTML = item["id"]; 
row.cells["tdText"].innerHTML = item["text"]; 
} 
} 
</script> 
</head> 
<body> 
<div id="divScroll" style="float:right"> 
</div> 
<table border="1"> 
<!--行標(biāo)題--> 
<thead> 
<tr> 
<th> 
ID 
</th> 
<th> 
Text 
</th> 
</tr> 
</thead> 
<!--數(shù)據(jù)展示區(qū)--> 
<tbody id="tblList"> 
<tr id="trTpl"> 
<td id="tdID"> 
</td> 
<td id="tdText"> 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 