Js table des dizaines de milliers de données chargement instantané mise en œuvre des compétences code_javascript

Sous forme Js, des dizaines de milliers de données sont chargées instantanément

Dans l'application réelle d'Ajax chargeant dynamiquement des données, tout le monde est habitué à une façon de penser : une donnée crée une ligne.
Donc, si la quantité de données est importante et que les données doivent être chargées en même temps, le navigateur restera bloqué pendant longtemps

Inspiré du contrôle Flex DataGrid, dans le contrôle Flex DataGrid, le La méthode d'affichage des données n'est pas la même. Elle ne crée pas autant de lignes qu'il y a de données. Elle ne crée qu'une douzaine ou une vingtaine de lignes au maximum (supposées être n lignes) que vous voyez sur l'interface. beaucoup de données, vous serez extrait des données lors du processus de défilement. Les n lignes de données qui doivent être vues sont réaffichées dans les n lignes de contrôles qui ont été créées.
En d'autres termes, dans le contrôle DataGrid de Flex, ce que nous voyons réellement, ce sont uniquement les n lignes de contrôles, mais les données qu'ils affichent sont filtrées en fonction de l'état de la barre de défilement.

Ainsi, si une méthode similaire est utilisée en JS, alors même s'il y a des dizaines de milliers de données, il ne sera peut-être nécessaire de créer que des dizaines de Dom, et l'efficacité sera naturellement beaucoup plus rapide.
Sans plus tarder, entrons dans le code. Tout d'abord, vous avez besoin d'une barre de défilement
Scrollbar.js

Copier le code Le code est le suivant :

function Scrollbar() {
this.options = {
total : 0, //Nombre total de données
pos : 0, //Position actuelle de défilement
itemSize : 20, / /Taille d'un seul élément
taille : 200 //Taille du contrôle
}
}
Scrollbar.prototype = (function () {
function setOptions(options) {
for (var attr dans les options) {
this.options[attr] = options[attr];
}
Refresh(this);
}
function Refresh(_this) {
if ( !_this.created)
return; //Définir la hauteur du contrôle
_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"
//Obtenir la position de défilement
function getPos() {
var top = this.bar. scrollTop;
var pos = parseInt(top / this.options.itemSize);
return pos;
//Le nombre de données pouvant être enregistrées. être affiché sur chaque page
function getPageItems() {
return this.options.size / this.options.itemSize
}
//Scroll event réponse
function OnScroll(_this) {
var pos = _this.getPos();
if (pos == _this.options.pos)
return
_this.options.pos = pos; );
}
//Création de la barre de défilement
function CreateAt(dom) {
var _this =
var bar = document.createElement("div"); content = document.createElement("div");
bar.appendChild(content);
bar.style.width = "19px"
bar.style.overflowY = "scroll"; bar.style.overflowX = "hidden";
if (bar.attachEvent) {
bar.attachEvent("onscroll", function () {
OnScroll(_this);
}); 🎜>} else {
//compatible Firefox
bar.addEventListener("scroll", function () {
OnScroll(_this);
}, false
}
content.style.backgroundColor = "white";
content .style.width = "1px";
this.bar = bar
this.content = content; == "string") {
dom = document. getElementById(dom);
dom.innerHTML = ""; créé = true;
Refresh(this);
}
return {
setOptions : setOptions,
CreateAt : CreateAt,
getPos : getPos,
getPageItems : getPageItems,
onScroll : null
//Simuler les événements de la barre de défilement
};
})();


Code de la page :




Copier le code


Le code est le suivant :

;/title>
javascript">
var data = [];
//Créer 10 000 exemples de données
pour (var i = 0; i < 10000; i ) {
var row = {
id: i,
text: "text" 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 = function(pos) {
ShowData(pos);
}
//Obtenir le modèle
var items = scrbar.getPageItems(); tpl = document.getElementById("trTpl");
tpl.parentNode.removeChild(tpl);
//Créez uniquement les dizaines de lignes de tableaux que vous voyez, donc c'est naturellement beaucoup plus rapide
var list = document.getElementById("tblList");
for (var i = 0; i < data.length && i < items; i ) {
var nr = tpl.cloneNode(true); > // Copier les nouvelles lignes à partir des lignes du modèle
list.appendChild(nr);
}
ShowData(scrbar.getPos())
}
//Afficher les données en fonction du défilement bar
function 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["tdText"].innerHTML = item["text"]
}
;corps> ;

-- En-tête de ligne -->

>Texte



tblList" >





🎜>