Tabela JS, dezenas de milhares de dados são carregados instantaneamente
Na aplicação prática de dados de carregamento dinamicamente do AJAX, todos estão acostumados a uma maneira de pensar: crie uma linha de dados.
Portanto, se o número for grande e os dados precisarem ser carregados ao mesmo tempo, o navegador ficará preso por meio dia.
Inspirado pelo controle de datagrid da Flex, no controle de datagrid da Flex, o método de exibição de dados não é criar tantas linhas quanto existe, ele só cria no máximo uma dúzia ou vinte linhas que você vê na interface (assumindo que seja se houver também Muitos dados, as n linhas de dados que você deve ver serão extraídas dos dados durante o processo de rolagem e redisplay no controle de n linhas que foi criado.
Em outras palavras, no controle Flex Datagrid, na verdade, vemos apenas os controles da linha N, mas os dados que eles exibem são filtrados de acordo com o estado da barra de rolagem.
Portanto, se for implementado em JS usando um método semelhante, existem dezenas de milhares de dados e pode ser apenas algumas dezenas de criação de DOM, que naturalmente serão muito mais rápidas.
Sem mais delongas, adicione o código. Primeiro, é necessária uma barra de rolagem
Scrollbar.js
A cópia do código é a seguinte:
função scrollBar () {
this.options = {
Total: 0, // Número total de dados
POS: 0, // A posição de rolagem atual
itens mize: 20, // tamanho único
Tamanho: 200 // tamanho de controle
};
}
Scrollbar.prototype = (function () {
Função Setopions (Opções) {
para (var att em opções) {
this.options [att] = opções [att];
}
Atualizar (isso);
}
Função Refresh (_This) {
if (! _This.created)
retornar;
_this.bar.style.Height = _This.Options.size + "px";
// Defina a altura do conteúdo
var ch = _this.options.total * _This.Options.itemSize;
_This.content.style.Height = ch + "px";
}
// Obtenha a posição de rolagem
função getPos () {
var top = this.bar.scrolltop;
var pos = parseint (top / this.options.itemSize);
retornar pos;
}
// O número de dados que podem ser exibidos por página
function getPageItems () {
Retorne this.options.size / this.options.itemsize;
}
// Resposta do evento de rolagem
função onScroll (_This) {
var pos = _this.getpos ();
if (pos == _this.options.pos)
retornar;
_this.options.pos = pos;
_This.Onscroll (POS);
}
// Criação da barra de rolagem
função createat (dom) {
var _This = this;
var bar = document.createElement ("div");
var content = document.createElement ("div");
bar.appendChild (conteúdo);
bar.style.width = "19px";
bar.style.overflowy = "roll";
bar.style.overflowx = "Hidden";
if (bar.attachevent) {
bar.attachevent ("OnScroll", function () {
ONScroll (_This);
});
} outro {
// Firefox Compatível
bar.addeventlistener ("roll", function () {
ONScroll (_This);
}, false);
}
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;
Atualizar (isso);
}
retornar {
Setoptions: Setoptions,
Createat: createat,
getpos: getpos,
getPageItems: getPageItems,
OnScroll: NULL
// simular eventos de barra de rolagem
};
}) ();
Código da página:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<título>
Controles da tabela
</title>
<script src = "scrollbar.js" type = "text/javascript">
</script>
<Script Language = "JavaScript" type = "text/javascript">
var dados = [];
// Crie dez mil dados de amostra
for (var i = 0; i <10000; i ++) {
var row = {
id: eu,
texto: "texto" + eu
};
data.push (linha);
}
// Crie ScrollBar
var scrBar = new ScrollBar ();
window.onload = function () {
scrbar.creatat ("divscroll");
scrbar.setOptions ({
Total: 10000,
Tamanho: 300
});
scrbar.onscroll = function (pos) {
Showdata (pos);
}
// Obtenha o modelo
var itens = scrBar.getPageItems ();
var tpl = document.getElementById ("trtpl");
tpl.parentnode.removeChild (TPL);
// Crie apenas algumas dezenas de linhas de mesas que você vê, então é naturalmente muito mais rápido
var lista = document.getElementById ("tbllist");
for (var i = 0; i <data.length && i <itens; i ++) {
var nr = tpl.cloneNode (true);
// Copie a nova linha da linha de modelo
list.appendChild (nr);
}
ShowData (scrBar.getpos ());
}
// exibe dados de acordo com a barra de rolagem
função showdata (pos) {
var n = scrBar.getPageItems ();
var linhas = document.getElementById ("tbllist"). linhas;
for (var i = 0; i <n; i ++) {
var row = linhas [i];
var item = dados [i + pos];
row.cells ["tdid"]. innerhtml = item ["id"];
row.cells ["tdText"]. innerhtml = item ["text"];
}
}
</script>
</head>
<Body>
<div id = "divscroll" style = "float: direita">
</div>
<tabela>
<!-Título da linha->
<head>
<tr>
<th>
EU IA
</th>
<th>
Texto
</th>
</tr>
</head>
<!-Área de exibição de dados->
<tbody id = "tbllist">
<tr id ID = "trtpl">
<td id = "tdid">
</td>
<td id = "tdText">
</td>
</tr>
</tbody>
</tabela>
</body>
</html>