[DOM] Optimisation d'un datagrid editable
Bonjour,
Je souhaite mettre en place un datagrid editable mais j'ai quelques soucis. Le premier est que j'ai l'impression que le javascript n'est pas procédural au niveau de l'exécution des fonctions, voici mon cas :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
var table = document.getElementById("grid");
var template = document.getElementById("template");
function createGrid()
{
$.ajax({
type:"GET",
dataType:"json",
url:"/monurl",
success:function(data) {
for (var i in data) {
createRow();
}
}
});
}
function createRow()
{
tr = template.cloneNode(true);
table.appendChild(tr);
}
window.onload = createGrid(); |
Lorsque j'execute ce type de code pour 2000 rows, il charge la page en quelques centaines de ms puis commence à exécuter la fonction createGrid(). La fonction met un certain temps à s'exécuter (30s-1min) et affiche le résultat non pas au fur et à mesure que les lignes se clonent mais tout d'un coup !
Comment faire en sorte que les lignes s'affichent au fur et à mesure?
J'aimerais également optimiser la création du DOM (createRow()) car je trouve ça extrêmement long pour 2000 lignes. Vaut-il mieux cloner un noeud ou bien le récréer avec les fonctions document.createElement et appendChild ?
Finalement, si vous avez des retours d'expérience sur l'utilisation des datagrids editables comme celui de ExtJS ou bien celui de Dojo, il serait gentil d'en faire part :)
Je vous remercie.
A+
