Tri décroissant et croissant d'un tableau dynamique remplie par un internaute

Soyez le premier à donner votre avis sur cette source.

Vue 9 188 fois - Téléchargée 421 fois

Description

Coucou tout le monde,
bonje ne l'ai pas trouvé sur ce site donc peut-être qu'il n'y est pas :
j'ai réalisé dernièrement le tri d'un tableau dynamique remplie par un utilisateur, donc il ne contient que des zones de textes. et de quoi supprimer et ajouter des lignes.
Pour la partie ajout et suppression, elle n'est pas de moi, donc ne vous étonnez pas de ne pas y trouver les sources, je ne pense pas avoir le droit de les donner (vous pouvez me les demander par message privé).

Pour la partie trie j'ai essayé de faire simple , mais je compte sur vous pour me proposer des optimisations bien sûr...

L'algorithme a été testé sur environ une trentaine de lignes, je le testerais plus tard avec le contenu d'une base de données (une fois certains identifiants reçues pour exporter le site et la base).

J'espère qu'il vous sera utile!

Source / Exemple :


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

														///////// partie triage des données ///////
														
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var copieTableau = new Array(); // tableau javascript contenant les données de celui en HTML
var tableauLignesCasesVides = new Array(); // Sert à enregistrer les lignes contenant les cellules vides se trouvant dans la colonne à trier
function  sort_int(p1,p2) { return p1-p2; }			//fonction pour trier les nombres
function sort_char(p1,p2) { return ((p1>=p2)<<1)-1; }	//fonction pour trier les strings
	
	

function echange (p1, p2, nbLignes, nbColonnes) // une fois le tri d'un colonne effectué, il faut mettre à la bonne place les autres éléments du tableau, j'effectue donc ici un échange de 						 												//places entre deux lignes.
{
	for (var index1 = p1, index2 = p2; index1 <= (nbLignes * nbColonnes) - (nbLignes - p1); index1 = index1 + nbLignes, index2 = index2 + nbLignes)
	{
		var temp = copieTableau[index1];
		copieTableau[index1] = copieTableau[index2];
		copieTableau[index2] = temp;
	}
}

function verifCaseVide(ligne, index) // vérifie si la cellule en cours de la colonne à trier est vide ou non
{
	if (copieTableau[index + ligne] == "") // on se positionne sur la cellule correspondant à la colonne et à la ligne en cours de traitement
		return true; // si c'est vide
	else
		return false;
}

function enregistrementLignesCasesVides(ligne, nbLignes, nbColonnes, cpt) // si la cellule traitée est vide, on enregistre toute la ligne dans le tableau "tableauLignesCasesVides"
{
	for(var indice = ligne; indice <= (nbColonnes * nbLignes) - (nbLignes - ligne); indice += nbLignes) // déplacement colonne par colonne
	{	
		tableauLignesCasesVides[cpt] = indice; // on enregistre donc les indices des cellules appartennant à la ligne concernée
		cpt ++;
	}
	
	return cpt;
}

/* tri du tableau */

// triOrdre -> 1 pour décroissant, 0 pour croissant
// numeroColonne -< pour savoir où se trouve la colonne cliquée dans le tableau

function TableOrder(triOrdre, numeroColonne)
{
	var tableau = document.getElementById('tableau'); // on va enregistrer notre objet tableau
	var nbLignes = tableau.rows.length - 3; // on prend le nombre de lignes qui le compose (-3 viens du fait qu'il existe une première ligne cachée qui sert de modèle à dupliquer lors d'un    										//ajout de ligne)
	
	if (nbLignes > 1) // Sinon ça sert à rien de trier ...
	{
		var nbColonnes = tableau.rows[0].cells.length; // on enregistre le nombre de colonnes existantes.
		var FntSort = sort_int; // Cette variable enregistre le type de tri à effectuer, pourquoi on l'initialise avec un sort_int, nous le verrons par la suite.

		var index = nbLignes * (numeroColonne - 1); // Une fois que l'on a copié le tableau HTML dans le tableau javascript, il faut savoir où se trouve dans ce dernier les éléments à trier, 
													// index va contenir l'indice correspondant au numéro de la première cellule de la colonne à trier.

    	var tableauSort = new Array(); 				// ce tableau contient le contenu de la colonne à trier

		var cpt = 0;								// un compteur pour parcourir un tableau.

		var indice = 0;								// idem
	
		for (var colonne = 0; colonne < nbColonnes; colonne ++) // et c'est partie pour copier le tableau HTML dans le tableau javascript "copieTableau"
		{
			for (var ligne = colonne + nbColonnes; ligne <= (nbLignes * nbColonnes) + cpt; ligne = ligne + nbColonnes) // afin de retrouver facilement les données à trier, on va copier les  			 																														//données du tableau HTML colonne par colonne.
			{
				copieTableau[indice] = document.listing.champ[ligne].value; // Donc on aboutit à un tableau en une dimension contenant les données du tableau HTML colonne par colonne
				indice ++; // D'ou le besoin d'un autre indice de parcourt s'incrémentant différemment
			}
			
			cpt ++; // un compteur pour éviter de dépasser la taille du tableau HTML lors de sa copie
		}
	 
	 // après il va falloir définir si l'on tri des nombres ou des chaines de caractères.
	 
		cpt = index; // on va donc parcourir copieTableau à partir de l'indice correspondant au début de la colonne à trier.
		var verifInt = true; // on va vérifier si l'on a dans la colonne à trier QUE des nombres
	
		while (cpt < index + nbLignes && verifInt == true)
		{
			if (!copieTableau[cpt].match(/^[0-9£€$\.\s-]+$/) && copieTableau[cpt] != "") // Si jamais on a rien qui est inscrit dans une cellule, on l'intèrprète comme un 0
			{
				FntSort=sort_char; // hop, on a trouvé une chaine de caractères.
				verifInt = false; // Bin voilà quoi, y a pas que des nombres finalement
			}
		
			cpt ++;
		}

		tableauSort = copieTableau.slice(index, index + nbLignes); // Et maintenant on copie les données de la colonne à copier dans le tableau servant au triage
	
		tableauSort.sort(FntSort); // on trie de façon croissante

		if (triOrdre == 1) // si on avait choisie de trier de façon décroissante
			tableauSort.reverse(); // on inverse les données dans le tableau de triage

		// Maintenant il va falloir faire correspondre les données triées avec le reste des champs du tableau copieTableau
		for (var indiceTabSort = 0, indiceCopieTab = index; indiceTabSort < tableauSort.length; indiceTabSort ++, indiceCopieTab ++)
		{
			if (tableauSort[indiceTabSort] != copieTableau[indiceCopieTab]) // on va alors comparer la place des données triées dans le tableau de triage avec celle qu'elles occupent dans le  																			//tableau copieTableau. La condition est vérifiée lorsque la place d'une donnée ne correspond pas d'un tableau à  														 																			// l'autre 	 									
			{
				var trouve = false;
				indice = indiceCopieTab + 1;
									
				while (!trouve && indice < numeroColonne * nbLignes) // On va devoir alors rechercher où se trouve la donnée triée dans le tableau copieTableau, pas besoin de rechercher sur    																// tout le tableau, on regarde juste dans l'intervalle de données correspondant à l'étendue de la colonne à trier.
				{
					if (tableauSort[indiceTabSort] == copieTableau[indice]) // Ah! On a trouvé l'indice de la valeur triée dans le tableau copieTableau ( c'est l'image du tableau HTML colonne   																		    // par colonne pour rappel)
					{
						indice = indice - ((numeroColonne-1) * nbLignes); // Comme copieTableau est une image du tableau HTML colonne par colonne, on peut dire ici que l'on calcule l'indice
																		// de la ligne à déplacer dans copieTableau
						echange (indiceTabSort, indice, nbLignes, nbColonnes); // On échange les deux lignes
						trouve = true;
					}
						
					indice ++;
				}
			}
		}
		
		indice = nbColonnes;
		cpt = 0;
		var indiceTabLCV = 0; // cette variable contient en fait la taille du tableau   "tableauLignesCasesVides"
		
		for (var ligne = 0; ligne < nbLignes; ligne ++) // Maintenant c'est comme au début, sauf que cette fois-ci on copie les données du tableau copieTableau dans celui en HTML
		{
                       if (verifCaseVide(ligne, index)) // on vérifie sur la ligne en cours si la cellule se trouvant dans la colonne à trier est vide ou non
				indiceTabLCV = enregistrementLignesCasesVides(ligne, nbLignes, nbColonnes, indiceTabLCV); // si c'est le cas on enregistre les indices des cellules de la ligne
			
			else // sinon on recopie la ligne dans le tableau HTML
			{
				for (var colonne = ligne; colonne <= (nbLignes * (nbColonnes - 1)) + cpt; colonne = colonne + nbLignes )
				{
						document.listing.champ[indice].value = copieTableau[colonne]; 
						indice ++; 
				}
			}
			
			cpt ++;
		}

                if (indiceTabLCV > 0) // si on a détecté une ou plusieurs cellules vides dans la colonne à trier, il faut alors rechercher les lignes enregistrées dans le tableau                              // "tableauLignesCasesVides" et les placer à la fin du tableau HTML
		{
			var taille = indiceTabLCV; // on enregistre la taille du tableau
			
			for (indiceTabLCV = 0; indiceTabLCV < taille; indiceTabLCV += nbColonnes) // comme on a enregistré des lignes entières dans ce tableau, on peut avancer qu'il est divisé en     	       																				// tranches dont l'étendue correspond au nombre de colonnes.
				for (cpt = indiceTabLCV; cpt < nbColonnes + indiceTabLCV; cpt ++) // on va donc parcourir chacune de ces divisions
				{
					document.listing.champ[indice].value = copieTableau[tableauLignesCasesVides[cpt]]; // pour les enregistrer l'une à la suite de l'autre dans le tableau HTML
					indice ++; // indice reprend là où il s'était arrêté lors de la copie des lignes contenant les cellules pleines de la colonne à trier
				}
		}
	}
}

// Bon bon j'espère que c'était assez clair, , n'hésitez pas à poser vos questions et vos solutions d'optimisations.

Conclusion :


La différence par rapport à d'autres codes sources du site réside, je pense, dans le fait que le tri s'effectue à partir de données de textArea et non pas de simples cellules ne contenant que du texte.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

psyckan
Messages postés
135
Date d'inscription
vendredi 27 août 2004
Statut
Membre
Dernière intervention
8 mai 2010
-
Salut,

J'ai testé le zip et y'a déjà plusieurs problèmes :

- C'est quand même bizarre de poster une source ou certaines fontions ne marchent pas. Tu aurais pu essayer de faire les fonctions delLigne et addLigne.

- Ensuite au niveau du tri, si je rentre trois ligne a,b,c dans la colonne un et que je clic sur les deux fleches pour trier le tableau en fonction de la colonne 1, alors le tableau prendra en compte dans le tri les lignes vides et affichera mais trois lignes au debut ou à la fin du tableau. Alors que ce qu'on veux normalement, c'est les avoir tout le temps au debut du tableau mais dans l'ordre inverse.

Voila tout ce que j'ai remarqué pour l'instant
barbe91
Messages postés
20
Date d'inscription
lundi 20 avril 2009
Statut
Membre
Dernière intervention
24 novembre 2011
-
Bien pour delligne et addligne je les ait les sources, mais comme elles ne sont pas de moi je ne sais pas si j'ai le droit de les mettre dans le zip.

Pour ton dernier commentaire, j'avais pas pensé à ça ^^, mais je corrigerais ça.
Merci!

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.