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

JS 形式で、数万のデータが瞬時にロードされます

データを動的にロードする Ajax の実際のアプリケーションでは、1 つのデータから 1 つの行が作成されるという考え方に誰もが慣れています。
データの量が多く、データを一度にロードする必要がある場合、ブラウザは長時間スタックしてしまいます。

Flex DataGrid コントロールからインスピレーションを得た、Flex DataGrid コントロールでは、データの表示方法は同じではありません。データの数と同じ数の行は作成されません。インターフェイス上に表示されるのは、せいぜい 12 行または 20 行だけです。大量のデータがある場合、スクロール処理中にデータから抽出されるため、表示されるべき 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) {
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
//スクロールバーイベントをシミュレートします
})();


ページコード:




コードをコピーします


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