Js表格萬條數據瞬間加載實現代碼

作者：Eve Cole 更新時間：2025-02-20 01:24:01

Js表格，萬條數據瞬間加載

在Ajax動態加載數據的實際應用中，大家都習慣了一種思維方式：一條數據創建一行。

於是如果數量大的時候，一次性要加載完數據的話，瀏覽器就會卡上半天

受Flex的DataGrid控件的啟發，在Flex的DataGrid控件中，展示數據的方法並不是有多少條數據就創建多少行，它最多只創建你在界面上所看到的十幾二十行（假設為n行），如果數據多的話，在滾動過程中，會從數據中抽取你應該看到的這n行數據，重新展示在已經創建好的那n行控件中。

也就是說，Flex的DataGrid控件中，我們實際上看到的僅僅是那n行控件，只是它們展示的數據是根據滾動條狀態來篩選出來的。

所以，如果在JS中，也用類似的方法實現，那麼就是上萬條數據，可能也只要創建幾十個Dom而已，效率自然快得多了。

廢話不多說，上代碼。首先，需要一個滾動條

Scrollbar.js

複製代碼代碼如下:

function Scrollbar() {

this.options = {

total : 0, //數據總數

pos : 0, //當前滾動位置

itemSize : 20, //單項尺寸

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; //設置控件高度

_this.bar.style.height = _this.options.size + "px";

//設置內容高度

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;

}

//每頁可展示的數據數量

function getPageItems() {

return this.options.size / this.options.itemSize;

}

//滾動事件響應

function OnScroll(_this) {

var pos = _this.getPos();

if (pos == _this.options.pos)

return;

_this.options.pos = pos;

_this.onScroll(pos);

}

//滾動條創建

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

//模擬滾動條事件

};

})();

頁面代碼：

複製代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>

表格控件

</title>

</script>

var data = [];

//創建一萬條示例數據

for (var i = 0; i < 10000; i++) {

var row = {

id: i,

text: "text" + i

};

data.push(row);

}

//創建滾動條

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);

//僅創建所看到的幾十行表格，所以自然快得多

var list = document.getElementById("tblList");

for (var i = 0; i < data.length && i < items; i++) {

var nr = tpl.cloneNode(true);

//從模板行複制新行

list.appendChild(nr);

}

ShowData(scrbar.getPos());

}

//根據滾動條，展示數據

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>

<table>

<thead>

<tr>

<th>

</th>

<th>

Text

</th>

</tr>

</thead>

</td>

</td>

</tr>

</tbody>

</table>

</body>

</html>