js上万条数据瞬间渲染到页⾯，通过table表格演⽰主页⾯⽂件html
var data = [];
//创建⼀万条⽰例数据
for (var i = 0; i < 10000; i++) {
var row = { id: i, text: "text" + i };
data.push(row);
}
//创建滚动条
var scrbar = new Scrollbar();
js教程removechild
scrbar.CreateAt("divScroll");
scrbar.setOptions({ total: 10000, size: 300 });
ShowData(pos);
}
//获取模板
var items = PageItems();
var tpl = ElementById("trTpl");
veChild(tpl);
//仅创建所看到的⼏⼗⾏表格，所以⾃然快得多
var list = ElementById("tblList");
for (var i = 0; i < data.length && i < items; i++) {
var nr = tpl.cloneNode(true);  //从模板⾏复制新⾏
list.appendChild(nr);
}
Pos());
}
//根据滚动条，展⽰数据
function ShowData(pos) {
var n = PageItems();
var rows = ElementById("tblList").rows;
for (var i = 0; i < n; i++) {
var row = rows[i];
var item = data[i + pos];
}
}
Scrollbar.js⽂件
function Scrollbar() {
this.options = {
total: 0,  //数据总数
pos: 0,    //当前滚动位置
itemSize: 20,  //单项尺⼨
size: 500  //控件尺⼨
};
}
Scrollbar.prototype = (function () {
function setOptions(options) {
for (var attr in options) {
this.options[attr] = options[attr];
}
Refresh(this);
}
function Refresh(_this) {
if (!_ated) return;
//设置控件⾼度
_this.bar.style.height = _this.options.size + "px";
//设置内容⾼度
var ch = _al * _this.options.itemSize;
_t.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 = _Pos();
if (pos == _this.options.pos) return;
_this.options.pos = pos;
_Scroll(pos);
}
//滚动条创建
function CreateAt(dom) {
var _this = this;
var bar = ateElement("div");
var content = ateElement("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;
if (typeof (dom) == "string") {
dom = ElementById(dom);
}
dom.innerHTML = "";
dom.appendChild(this.bar);
Refresh(this);
}
return {
setOptions: setOptions,
CreateAt: CreateAt,
getPos: getPos,
getPageItems: getPageItems,
onScroll: null//模拟滚动条事件
};
})();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。