JS -Tabelle, Zehntausende von Daten werden sofort geladen
Bei der praktischen Anwendung von AJAX -Dynamikladendaten wird jeder an eine Denkweise gewöhnt: Erstellen Sie eine Reihe von Daten.
Wenn also die Zahl groß ist und die Daten gleichzeitig geladen werden müssen, steckt der Browser einen halben Tag.
Inspiriert von Flexs Datagrid -Steuer Viele Daten, die N -Zeilen der Daten, die Sie sehen sollten, werden während des Bildlaufprozesses aus den Daten extrahiert und in der N -Zeilen -Steuerung, die erstellt wurde, neu gespielt.
Mit anderen Worten, in der Flex-Datagrid-Steuerung sehen wir tatsächlich nur die N-Line-Steuerelemente, aber die von ihnen angezeigten Daten werden gemäß dem Bildlaufleistenstatus gefiltert.
Wenn es daher in JS unter Verwendung einer ähnlichen Methode implementiert wird, gibt es zehn Tausende von Datenstücken, und es ist möglicherweise nur ein paar Dutzend DOM -Erstellungen, die natürlich viel schneller sein werden.
Fügen Sie ohne weiteres den Code hinzu. Erstens wird eine Bildlaufleiste benötigt
Scrollbar.js
Die Codekopie lautet wie folgt:
Funktion scrollBar () {
this.options = {
Gesamt: 0, // Gesamtzahl der Daten
POS: 0, // die aktuelle Bildlaufposition
ItemSize: 20, // Einzelgröße
Größe: 200 // Kontrollgröße
};
}
ScrollBar.prototype = (function () {
Funktionsetoptionen (Optionen) {
für (var attr in option) {
this.options [attr] = options [attr];
}
Aktualisieren (dies);
}
Funktion aktualisieren (_this) {
if (! _this.created)
Rückkehr;
_this.bar.style.Height = _this.options.size + "px";
// Inhaltshöhe festlegen
var ch = _this.options.total * _this.options.ItemSize;
_this.content.style.height = ch + "px";
}
// Scrollenposition erhalten
Funktion getPos () {
var top = this.bar.scrolltop;
var pos = parseInt (top / this.options.ItemSize);
return pos;
}
// die Anzahl der Daten, die pro Seite angezeigt werden können
Funktion getPageItems () {
return this.options.size / this.options.ItemSize;
}
// Ereignisreaktion scrollen
Funktion OnScroll (_this) {
var pos = _this.getPos ();
if (pos == _this.options.pos)
zurückkehren;
_this.options.pos = pos;
_this.oncroll (pos);
}
// Scrollbar -Kreation
Funktion createat (Dom) {
var _this = this;
var bar = document.createelement ("div");
var content = document.createelement ("div");
Bar.AppendChild (Inhalt);
bar.style.width = "19px";
Bar.Style.Overflowy = "Scroll";
Bar.Style.OverflowX = "Hidden";
if (bar.attachEvent) {
bar.attachEvent ("Onscroll", function () {
OnScroll (_this);
});
} anders {
// Firefox -kompatibel
bar.addeventListener ("scrollen", function () {
OnScroll (_this);
}, FALSCH);
}
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;
Aktualisieren (dies);
}
zurückkehren {
Setoptionen: Setoptionen,
Kreateat: kreateat,
Getpos: Getpos,
getPageItems: getPageItems,
ONSCROLL: NULL
// Scrollbar -Ereignisse simulieren
};
}) ();
Seitencode:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<title>
Tabellenkontrollen
</title>
<script src = "scrollbar.js" type = "text/javaScript">
</script>
<script Language = "JavaScript" type = "text/javaScript">
var data = [];
// Zehntausend Beispieldaten erstellen
für (var i = 0; i <10000; i ++) {
var row = {
id: i,
Text: "Text" + i
};
Data.push (Zeile);
}
// Scrollbar erstellen
var scrbar = new scrollbar ();
window.onload = function () {
scrbar.createat ("divscroll");
scrbar.setOptions ({{{
Gesamt: 10000,
Größe: 300
});
scrbar.onscroll = function (pos) {
ShowData (pos);
}
// Die Vorlage erhalten
var items = scrbar.getPageItems ();
var tpl = document.getElementById ("trtpl");
tpl.parentnode.removechild (tpl);
// Erstellen Sie nur ein paar Dutzend Tabellenzeilen, die Sie sehen, daher ist es natürlich viel schneller
var list = document.getElementById ("tbllist");
für (var i = 0; i <data.length && i <items; i ++) {
var nr = tpl.clonenode (true);
// neue Zeile aus der Vorlagenzeile kopieren
list.Appendchild (nr);
}
ShowData (scrbar.getPos ());
}
// Daten gemäß der Bildlaufleiste anzeigen
Funktion showData (pos) {
var n = scrbar.getPageItems ();
var rows = document.getElementById ("tbllist"). Zeilen;
für (var i = 0; i <n; i ++) {
var row = Zeilen [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: rechts">
</div>
<tabelle>
<!-Zeilen Titel->
<kopf>
<tr>
<Th>
AUSWEIS
</th>
<Th>
Text
</th>
</tr>
</head>
<!-Datenanzeigebereich->
<tbody id = "tbllist">
<tr id = "trtpl">
<td id = "tdid">
</td>
<td id = "tdText">
</td>
</tr>
</tbody>
</table>
</body>
</html>