Tabla JS, decenas de miles de datos se cargan instantáneamente
En la aplicación práctica de la carga dinámica de AJAX, todos están acostumbrados a una forma de pensar: crear una fila de datos.
Entonces, si el número es grande y los datos deben cargarse a la vez, el navegador estará atascado durante medio día.
Inspirado en el control DataGrid de Flex, en el control de datagrí de Flex, el método de mostrar datos no es crear tantas filas como hay, solo crea como máximo una docena o veinte filas que ve en la interfaz (suponiendo que es si también hay. Muchos datos, las N filas de datos que debe ver se extraerán de los datos durante el proceso de desplazamiento y se redirigen en el control de la fila N que se ha creado.
En otras palabras, en el control Flex DataGrid, en realidad solo vemos los controles de la línea N, pero los datos que muestran se filtran de acuerdo con el estado de la barra de desplazamiento.
Por lo tanto, si se implementa en JS utilizando un método similar, entonces hay decenas de miles de datos, y puede ser solo unas pocas docenas de creación DOM, que naturalmente será mucho más rápida.
Sin más preámbulos, agregue el código. Primero, se necesita una barra de desplazamiento
Scrollbar.js
La copia del código es la siguiente:
función scrollbar () {
this.options = {
Total: 0, // Número total de datos
Pos: 0, // La posición de desplazamiento actual
Elemento de elementos: 20, // tamaño único
Tamaño: 200 // Tamaño de control
};
}
Scrollbar.prototype = (function () {
funciones setOptions (opciones) {
para (var att en opciones) {
this.options [attr] = options [attr];
}
Actualizar (esto);
}
Function Refresh (_THIS) {
if (! _this.created)
regresar; /Establecer la altura de control
_this.bar.style.height = _this.options.size + "px";
// establecer la altura del contenido
var ch = _this.options.total * _this.options.ItemSize;
_this.content.style.height = ch + "px";
}
// Obtener una posición de desplazamiento
function getpos () {
var top = this.bar.scrolltop;
var pos = parseint (top / this.options.ItemSize);
regresar pos;
}
// el número de datos que se pueden mostrar por página
función getPageItems () {
devolver esto.options.size / this.options.ItemSize;
}
// Respuesta del evento de desplazamiento
function onScroll (_this) {
var Pos = _THIS.GETPOS ();
if (pos == _this.options.pos)
devolver;
_This.options.Pos = pos;
_This.onscroll (pos);
}
// Creación de barra de desplazamiento
function createat (dom) {
var _This = this;
var bar = document.createElement ("div");
var content = document.createElement ("div");
bar.appendChild (contenido);
bar.style.width = "19px";
bar.style.overflowy = "Scroll";
bar.style.overflowx = "oculto";
if (bar.attachevent) {
bar.attachevent ("onScroll", function () {
OnScroll (_This);
});
} demás {
// Firefox Compatible
bar.addeventListener ("scroll", function () {
OnScroll (_This);
}, FALSO);
}
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;
Actualizar (esto);
}
devolver {
setOptions: setOptions,
Createat: createat,
GetPos: GetPos,
getPageItems: getPageItems,
Onscroll: NULL
// simular eventos de barra de desplazamiento
};
}) ();
Código de página:
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title>
Controles de mesa
</title>
<script src = "scrollbar.js" type = "text/javascript">
</script>
<script language = "javaScript" type = "text/javaScript">
var data = [];
// crear diez mil datos de muestra
para (var i = 0; i <10000; i ++) {
var fila = {
ID: yo,
texto: "texto" + yo
};
data.push (fila);
}
// Crear barra de desplazamiento
var scrbar = new ScrollBar ();
window.onload = function () {
scrbar.createat ("divscroll");
scrbar.setOptions ({
Total: 10000,
Tamaño: 300
});
scrbar.onscroll = function (pos) {
ShowData (pos);
}
// Obtener la plantilla
VAR items = scrbar.getPageItems ();
var tpl = document.getElementById ("TRTPL");
tpl.parentnode.removechild (tpl);
// Cree solo unas pocas docenas de filas de tablas que ves, por lo que es naturalmente mucho más rápido
var list = document.getElementById ("tbllist");
for (var i = 0; i <data.length && i <items; i ++) {
var nr = tpl.clonenode (true);
// Copiar nueva línea desde la línea de plantilla
list.appendChild (NR);
}
ShowData (scrbar.getpos ());
}
// Muestra datos de acuerdo con la barra de desplazamiento
función showData (pos) {
var n = scrbar.getPageItems ();
var filas = document.getElementById ("tblList"). filas;
para (var i = 0; i <n; i ++) {
var fila = filas [i];
var item = data [i + pos];
Row.Cells ["tdid"]. innerhtml = item ["id"];
Row.Cells ["tdtext"]. innerhtml = item ["text"];
}
}
</script>
</ablo>
<Body>
<div id = "divscroll" style = "float: right">
</div>
<Table>
<!-Título de la línea->
<Evista>
<tr>
<th>
IDENTIFICACIÓN
</th>
<th>
Texto
</th>
</tr>
</ablo>
<!-Área de visualización de datos->
<tbody id = "tbllist">
<tr id = "trtpl">
<td id = "tdid">
</td>
<td id = "tdtext">
</td>
</tr>
</tbody>
</table>
</body>
</html>