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

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" >





🎜>