Js表の万本のデータは瞬時にコードをロードします。
Jsテーブル、万本のデータは瞬間的にAjaxの動的なロードデータの実用的な応用の中でロードして、みんなはすべて1種の思惟の方式に慣れました：1本のデータは1行を作ります。したがって、数が大きい場合、一度にデータをロードし終わると、ブラウザは半日でFlexのDataGridコントロールから啓発され、FlexのData Gridコントロールにおいて、データを表示する方法はいくつのデータがあるかではなく、どれだけの行を作成しますか？スクロール中にデータからn行のデータを抽出し、作成したn行のコントロールに再表示します。つまり、FlexのDataGridコントロールにおいて、実際に見たのはそのnラインコントロールだけで、それらが示すデータはスクロールバーの状態によって選別されます。したがって、JSにおいても同様の方法で実現すれば、数万本のデータがあり、数十個のDomを作成するだけで、効率は自然にずっと速いです。余計なことを言わないで、コードを入れてください。まず、スクロールバーSrollbar.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
//
};
})();