JSテーブル数万データの即時読み込み実装コード_JavaScriptスキル

function Scrollbar() {
this.options = {
total : 0, //データ総数
pos : 0, //現在のスクロール位置
itemSize : 20, / /単品サイズ
size : 200 //コントロールサイズ
}
}
Scrollbar.prototype = (function () {
function setOptions(options) {
for (varオプションの attr) {
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; );
}
// スクロールバーの作成
function CreateAt(dom) {
var _this = this;
var bar = document.createElement("div"); content = document.createElement("div");
bar.appendChild(content);
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);
},
content.style.backgroundColor = "white";
content .style.width = "1px";
this.content = content; == "string") {
dom = document.getElementById(dom);
dom.innerHTML = "";
dom.appendChild(this.bar);
Refresh(this);
}
return {
setOptions : setOptions,
CreateAt : CreateAt,
getPos : getPos,
getPageItems :
onScroll : null
//スクロールバーイベントをシミュレートします
})();


ページコード:




コードをコピーします


コードは次のとおりです: