La table JS, des dizaines de milliers de données sont chargées instantanément
Dans l'application pratique de l'AJAX, chargeant dynamiquement des données, tout le monde est habitué à une façon de penser: créer une rangée de données.
Donc, si le nombre est important et que les données doivent être chargées en même temps, le navigateur sera bloqué pendant une demi-journée.
Inspiré par le contrôle DataGrid de Flex, dans le contrôle de DataGrid de Flex, la méthode d'affichage des données n'est pas de créer autant de lignes qu'il y en a, elle ne crée qu'au plus une douzaine ou vingt lignes que vous voyez sur l'interface (en supposant que c'est s'il y a trop De nombreuses données, les n lignes de données que vous devriez voir seront extraites des données pendant le processus de défilement et revisaient dans le contrôle N Row qui a été créé.
En d'autres termes, dans le contrôle Flex DataGrid, nous ne voyons en fait que les contrôles N-Line, mais les données qu'ils affichent sont filtrées en fonction de l'état de la barre de défilement.
Par conséquent, s'il est implémenté en JS en utilisant une méthode similaire, il y a des dizaines de milliers de données, et ce n'est peut-être que quelques dizaines de création DOM, ce qui sera naturellement beaucoup plus rapide.
Sans plus tarder, veuillez ajouter le code. Tout d'abord, une barre de défilement est nécessaire
Scrollbar.js
La copie de code est la suivante:
fonction Scrollbar () {
this.options = {
Total: 0, // Nombre total de données
pos: 0, // la position de défilement actuelle
itemSize: 20, // une seule taille
Taille: 200 // Taille de contrôle
};
}
Scrollbar.prototype = (function () {
fonction setOptions (options) {
pour (var attir dans les options) {
this.options [attr] = options [att];
}
Actualiser (ceci);
}
Fonction Refresh (_This) {
if (! _ce.Created)
retour;
_This.bar.style.height = _This.options.size + "px";
// définir la hauteur du contenu
var ch = _this.options.total * _This.options.itemSize;
_This.content.style.height = ch + "px";
}
// Obtenez une position de défilement
fonction getpos () {
var top = this.bar.scrolltop;
var pos = parseInt (top / this.options.itemsize);
retour pos;
}
// le nombre de données qui peuvent être affichées par page
fonction getPageItems () {
Renvoie this.options.size / this.options.itemSize;
}
// Réponse de l'événement de défilement
fonction onScroll (_This) {
var pos = _This.getPos ();
if (pos == _this.options.pos)
Retour;
_This.options.pos = pos;
_CeT.onscroll (pos);
}
// Création de barreaux de défilement
fonction CreateAt (DOM) {
var _this = this;
var bar = document.CreateElement ("div");
var contenu = document.CreateElement ("div");
Bar.ApendChild (contenu);
bar.style.width = "19px";
bar.style.overflowy = "Scroll";
bar.style.overflowx = "Hidden";
if (bar.attachevent) {
bar.Attachevent ("Onscroll", fonction () {
OnScroll (_This);
});
} autre {
// Firefox compatible
bar.addeventListener ("scroll", fonction () {
OnScroll (_This);
}, FAUX);
}
content.style.backgroundcolor = "blanc";
content.style.width = "1px";
this.bar = bar;
this.Content = contenu;
if (typeof (dom) == "String") {
Dom = document.getElementById (DOM);
}
dom.innerhtml = "";
Dom.ApendChild (this.bar);
this.Created = true;
Actualiser (ceci);
}
retour {
setOptions: setOptions,
CreateEat: CreateEat,
getpos: getpos,
getPageItems: getPageItems,
Onscroll: null
// Simuler des événements de barre de défilement
};
}) ();
Code de page:
La copie de code est la suivante:
<! 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">
<adal>
<Title>
Commandes de table
</TITAL>
<script src = "scrollbar.js" type = "text / javascript">
</cript>
<script lingots = "javascript" type = "text / javascript">
var data = [];
// Créez dix mille exemples de données
pour (var i = 0; i <10000; i ++) {
var row = {
ID: I,
Texte: "texte" + i
};
data.push (row);
}
// Créer une barre de défilement
var scrbar = new Scrollbar ();
window.onload = function () {
scrbar.CreatEat ("divscroll");
scrbar.setOptions ({
Total: 10000,
Taille: 300
});
scrbar.onscroll = fonction (pos) {
Showdata (pos);
}
// Obtenez le modèle
var items = scrbar.getPageItems ();
var tpl = document.getElementById ("trtpl");
tpl.parentnode.removechild (TPL);
// ne créez que quelques douzaines de rangées de tables que vous voyez, donc c'est naturellement beaucoup plus rapide
var list = document.getElementById ("tbllist");
pour (var i = 0; i <data.length && i <items; i ++) {
var nr = tpl.clonenode (true);
// Copier la nouvelle ligne de la ligne de modèle
list.appendChild (NR);
}
ShowData (scrbar.getPos ());
}
// Afficher les données en fonction de la barre de défilement
fonction showData (pos) {
var n = scrbar.getPageItems ();
var rows = document.getElementById ("tbllist"). lignes;
pour (var i = 0; i <n; i ++) {
var row = lignes [i];
var item = data [i + pos];
row.cells ["tdid"]. innerHtml = item ["id"];
row.cells ["tdText"]. innerHtml = item ["text"];
}
}
</cript>
</ head>
<body>
<div id = "divscroll" style = "float: droite">
</div>
<ballage>
<! - Titre de ligne ->
<Thead>
<tr>
<h>
IDENTIFIANT
</th>
<h>
Texte
</th>
</tr>
</thEad>
<! - zone d'affichage de données ->
<tbody id = "tbllist">
<tr id = "trtpl">
<td id = "tdid">
</td>
<td id = "tdText">
</td>
</tr>
</tbody>
</ table>
</docy>
</html>