JSテーブル、数万のデータが即座にロードされます
Ajaxの動的読み込みデータの実際のアプリケーションでは、誰もが考え方に慣れています。データの行を作成します。
したがって、数値が大きく、データを一度にロードする必要がある場合、ブラウザは半日遅くなります。
FlexのDatagrid Controlに触発されたFlexのDatagridコントロールでは、データを表示する方法は、存在するほど多くの行を作成することではありません。インターフェイスに表示される最大数十列または20行しか作成しません（多くのデータ、表示されるデータのn行は、スクロールプロセス中にデータから抽出され、作成されたn行制御で再表示されます。
言い換えれば、Flex Datagridコントロールでは、実際にはNラインコントロールのみが表示されますが、表示されるデータはスクロールバー状態に従ってフィルタリングされます。
したがって、同様の方法を使用してJSで実装されている場合、数万個のデータがあり、それはほんの数十DOM作成である可能性があります。
これ以上苦労せずに、コードを追加してください。まず、スクロールバーが必要です
scrollbar.js
コードコピーは次のとおりです。
関数scrollbar（）{
this.options = {
合計：0、//データの総数
POS：0、//現在のスクロール位置
項目：20、//シングルサイズ
サイズ：200 //コントロールサイズ
};
}
scrollbar.prototype =（function（）{
関数setoptions（option）{
for（options in options）{
this.options [attr] = options [attr];
}
更新（これ）;
}
関数の更新（_this）{
if（！_this.created）
戻ります
_this.bar.style.height = _this.options.size + "px";
//コンテンツの高さを設定します
var ch = _this.options.total * _this.options.itemsize;
_this.content.style.height = ch + "px";
}
//スクロール位置を取得します
関数getpos（）{
var top = this.bar.scrolltop;
var pos = parseint（top / this.options.itemsize）;
POSを返します。
}
//ページごとに表示できるデータの数
function getPageItems（）{
this.options.size / this.options.itemsizeを返します。
}
//イベントの応答をスクロールします
function onsscroll（_this）{
var pos = _this.getpos（）;
if（pos == _this.options.pos）
戻る;
_this.options.pos = pos;
_this.onscroll（pos）;
}
// Scrollbar作成
function createat（dom）{
var _this = this;
var bar = document.createelement（ "div"）;
var content = document.createelement（ "div"）;
bar.AppendChild（コンテンツ）;
bar.style.width = "19px";
bar.style.overflowy = "scroll";
bar.style.overflowx = "hidden";
if（bar.attachevent）{
bar.attachevent（ "onscroll"、function（）{
onscroll（_this）;
}）;
} それ以外 {
// firefox互換
bar.addeventlistener（ "scroll"、function（）{
onscroll（_this）;
}、 間違い）;
}
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;
更新（これ）;
}
戻る {
setoptions：setoptions、
createat：createat、
getpos：getpos、
getPageItems：getPageItems、
Anscroll：null
// Scrollbarイベントをシミュレートします
};
}）（）;
ページコード：
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>
テーブルコントロール
</title>
<スクリプトsrc = "scrollbar.js" type = "text/javascript">
</script>
<スクリプト言語= "javascript" type = "text/javascript">
var data = [];
// 1万サンプルデータを作成します
for（var i = 0; i <10000; i ++）{
var row = {
ID：私、
テキスト：「テキスト」 + i
};
data.push（row）;
}
// Scrollbarを作成します
var scrbar = new Scrollbar（）;
window.onload = function（）{
scrbar.createat（ "divscroll"）;
scrbar.setoptions（{
合計：10000、
サイズ：300
}）;
scrbar.onscroll = function（pos）{
showdata（pos）;
}
//テンプレートを取得します
var items = scrbar.getPageItems（）;
var tpl = document.getElementById（ "TRTPL"）;
tpl.ParentNode.RemoveChild（TPL）;
//表示されるテーブルの数十列だけを作成するので、自然にはるかに高速です
var list = document.getElementById（ "tbllist"）;
for（var i = 0; i <data.length && i <items; i ++）{
var nr = tpl.clonenode（true）;
//テンプレート行から新しい行をコピーします
List.AppendChild（NR）;
}
showdata（scrbar.getpos（））;
}
//スクロールバーに従ってデータを表示します
関数showdata（pos）{
var n = scrbar.getPageItems（）;
var rows = document.getElementById（ "tbllist"）。rows;
for（var i = 0; i <n; i ++）{
var row = rows [i];
var item = data [i + pos];
row.cells ["tdid"]。innerhtml = item ["id"];
row.cells ["tdtext"]。innerhtml = item ["text"];
}
}
</script>
</head>
<body>
<div id = "divscroll" style = "float：right">
</div>
<表>
<！ - 行のタイトル - >
<head>
<tr>
<th>
id
</th>
<th>
文章
</th>
</tr>
</head>
<！ - データ表示領域 - >
<tbody id = "tbllist">
<tr id = "trtpl">
<td id = "tdid">
</td>
<td id = "tdtext">
</td>
</tr>
</tbody>
</table>
</body>
</html>