Tabel JS, puluhan ribu data dimuat secara instan
Dalam aplikasi praktis data memuat Ajax secara dinamis, setiap orang terbiasa dengan cara berpikir: buat deretan data.
Jadi jika angkanya besar dan data perlu dimuat pada satu waktu, browser akan macet selama setengah hari.
Terinspirasi oleh kontrol datagrid Flex, dalam kontrol datagrid Flex, metode menampilkan data bukan untuk membuat baris sebanyak yang ada, itu hanya membuat paling banyak selusin atau dua puluh baris yang Anda lihat di antarmuka (dengan asumsi itu jika ada juga juga Banyak data, baris N dari data yang harus Anda lihat akan diekstraksi dari data selama proses pengguliran dan dimainkan ulang dalam kontrol baris N yang telah dibuat.
Dengan kata lain, dalam kontrol datagrid flex, kami benar-benar hanya melihat kontrol N-line, tetapi data yang mereka tampilkan disaring sesuai dengan status batang gulir.
Oleh karena itu, jika diimplementasikan dalam JS menggunakan metode yang sama, maka ada puluhan ribu keping data, dan mungkin hanya beberapa lusin pembuatan DOM, yang secara alami akan jauh lebih cepat.
Tanpa basa -basi lagi, silakan tambahkan kode. Pertama, diperlukan bilah gulir
Scrollbar.js
Salinan kode adalah sebagai berikut:
function scrollbar () {
this.options = {
Total: 0, // Jumlah total data
POS: 0, // Posisi gulir saat ini
Itemsize: 20, // ukuran tunggal
Ukuran: 200 // ukuran kontrol
};
}
Scrollbar.prototype = (function () {
function setoptions (opsi) {
untuk (var attr in option) {
this.options [attr] = options [attr];
}
Segarkan (ini);
}
function refresh (_pis) {
if (! _This.created)
kembali;
_this.bar.style.height = _this.options.size + "px";
// atur tinggi konten
var ch = _this.options.total * _this.options.itemsize;
_this.content.style.height = ch + "px";
}
// Dapatkan posisi gulir
fungsi getPos () {
var top = this.bar.scrolltop;
var pos = parseInt (top / this.options.ItemSize);
mengembalikan pos;
}
// Jumlah data yang dapat ditampilkan per halaman
function getPageItems () {
kembalikan this.options.size / this.options.itemsize;
}
// Menggulir respons acara
fungsi onscroll (_this) {
var pos = _this.getPos ();
if (pos == _this.options.pos)
kembali;
_this.options.pos = pos;
_this.onscroll (pos);
}
// Kreasi Scrollbar
function createat (dom) {
var _pis = ini;
var bar = document.createElement ("div");
var content = document.createElement ("div");
Bar.AppendChild (konten);
bar.style.width = "19px";
bar.Style.Overflowy = "gulir";
bar.style.overflowx = "tersembunyi";
if (bar.attachevent) {
bar.attachevent ("onscroll", function () {
Onscroll (_This);
});
} kalau tidak {
// Firefox kompatibel
bar.addeventListener ("gulir", fungsi () {
Onscroll (_This);
}, PALSU);
}
content.style.backgroundColor = "white";
content.style.width = "1px";
this.bar = bar;
this.content = konten;
if (typeof (dom) == "string") {
dom = document.getElementById (DOM);
}
dom.innerhtml = "";
dom.AppendChild (this.bar);
this.created = true;
Segarkan (ini);
}
kembali {
setOptions: setoptions,
Createat: Createat,
GetPos: GetPos,
getPageItems: getPageItems,
Onscroll: Null
// Simulasi acara scrollbar
};
}) ();
Kode halaman:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>
Kontrol Tabel
</title>
<skrip src = "scrollbar.js" type = "text/javascript">
</script>
<bahasa skrip = "javascript" type = "text/javascript">
var data = [];
// Buat sepuluh ribu data sampel
untuk (var i = 0; i <10000; i ++) {
var row = {
ID: i,
Teks: "Teks" + i
};
data.push (baris);
}
// Buat scrollbar
var scrbar = scrollbar baru ();
window.onload = function () {
scrbar.createat ("divscroll");
scrbar.setoptions ({
Total: 10000,
Ukuran: 300
});
scrbar.onscroll = function (pos) {
Showdata (pos);
}
// Dapatkan template
var item = scrbar.getPageItems ();
var tpl = document.geteLementById ("trtpl");
tpl.parentnode.removechild (tpl);
// Buat hanya beberapa lusin baris tabel yang Anda lihat, jadi secara alami jauh lebih cepat
var list = document.geteLementById ("tbllist");
untuk (var i = 0; i <data.length && i <item; i ++) {
var nr = tpl.clonenode (true);
// Salin baris baru dari baris template
List.AppendChild (NR);
}
ShowData (scrbar.getpos ());
}
// Tampilkan data sesuai dengan bilah gulir
function showData (pos) {
var n = scrbar.getPageItems ();
var baris = document.geteLementById ("tbllist"). Baris;
untuk (var i = 0; i <n; i ++) {
var row = baris [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>
<able>
<!-Judul Line->
<head>
<tr>
<th>
PENGENAL
</th>
<th>
Teks
</th>
</tr>
</head>
<!-Area tampilan data->
<tbody id = "tbllist">
<tr id = "trtpl">
<td id = "tdid">
</td>
<td id = "tdtext">
</td>
</tr>
</tbody>
</boable>
</body>
</html>