Discussion :

[doogy]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

[SpaceFrog]

Une petite contribution pour accelerer la création de grands tableaux :

http://www.developpez.net/forums/d47...hlight=tableau

[doogy]

Merci.

J'ai passé une bonne partie de l'après midi à faire des tests et j'en ai conclut que faire un cloneNode(true) est environ 2x plus rapide que d'utiliser document.createElement et appendChild sur un tableau basique de 4colonnes.
Je n'ai pas garder le code des tests mais je les referais peut-être plus sérieusement un autre jour.

J'ai continuer mes tests avec cloneNode(true) et j'ai généré un datagrid de 2000 entrées sur 4 colonnes (réception et parsage du Json compris) en :
- 2.5s sur Firefox 3
- 600ms sur Chrome
- 400ms sur Safari (mais lorsqu'il m'affiche le message d'alerte du bench le DOM n'est pas réellement chargé donc c'est suspect...)

Sans le parsage du JSON mais juste en générant le DOM :
- 800ms sur Firefox 3
- 400ms sur Chrome
- 200ms sur Safari (idem ci-dessus, DOM pas totalement chargé

La réception du Json se fait en un peu plus de 200ms (Firebug) pour une taille de 125ko, je conclus donc que le parsage du Json prend :
- 1.7s sur Firefox 3
- 200ms sur Chrome
- 200ms sur Safari

Firefox a donc du mal à parser du Json...
Je ne sais pas si mes tests sont fiables mais j'ai fait du mieux que j'ai pu.

Je n'ai cependant pas trouvé comment attendre la fin d'exécution d'une fonction avant de continuer à exécuter un script. Si vous avez des pistes n'hésitez pas

A+

[SpaceFrog]

Et IE alors ?

tiens je vais refaire mon code avec un cloneNode alors pour voir ce que ça donne ...

[le_chomeur]

var table = document.getElementById("grid");
var template = document.getElementById("template");


ne seront pas interprété dans le header car les objet n'ont pas encore été créer il te faut instancié tes variables soit après le load , soit dans après la création de tes éléments