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
//模拟滚动条事件
};
})();
页面代码:
Stellungnahme:Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn