skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mercredi 2 novembre 2011

Bubblesort en JavaScript

Publié par Infinite Loop, à 21 h 23 3 commentaires

Dans un CMS, un des champs d'un formulaire permet à l'utilisateur de faire un choix à l'intérieur d'un selectbox. Comme c'est parfois le cas, l'élément recherché n'est pas disponible dans la liste et l'utilisateur doit changer de page pour aller dans un autre module ajouter un élément dans la liste de référence utilisé pour populer la liste de sélection du formulaire initial. Si le système est mieux pensé, il sera possible d'ajouter une entrée à la liste de référence sans même quitter le formulaire en cours d'édition. Parfois, ce sera sous forme d'un popup qui affichera un formulaire simplifié, qui soumettra le contenu à la base de données à l'aide d'un appel Ajax, qui lui-même retournera comme réponse l'identificateur unique et le libellé à venir glisser par JavaScript dans le selectbox du formulaire parent.

Voilà ce qui décrit le système sur lequel je travaillais cet après-midi. Tout fonctionnait à merveille. Le seul défaut, c'est que la nouvelle entrée s'insérait à la toute fin de la liste de référence au lieu de se positionner correctement par ordre alphabétique. Je me disais qu'une simple fonction de tri JavaScript de type "bubblesort" appliqué sur les options du selectbox serait suffisant pour rafraîchir l'ordre de la liste.

Un exemple de liste :

<select id="mySelectBox">
<option value="5">E</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="4">D</option>
<option value="26">Z</option>
<option value="3">C</option>
<option value="10">J</option>
</select>
J'ai codé cette fonction bubblesort en JavaScript qui fait le travail minimum pour répondre au besoin :
function bubbleSortOptionsByText(optionsList){
var length = optionsList.length;
var swap1, swap2;

while(length > 0){
for(var i=1 ; i<length ; i++){
if(optionsList[i-1].text > optionsList[i].text){
swap1 = optionsList[i-1];
swap2 = optionsList[i];

optionsList[i-1] = swap2;
optionsList[i] = swap1;
}
}
length = length-1;
}

return optionsList;
}
Appel avec jQuery :
$j = jQuery.noConflict();

$j(document).ready(function(){
var elems = $j('#mySelectBox option');
elems = bubbleSortOptionsByText(elems);
$j('#mySelectBox').html(elems);
});
Ça fonctionne. Malgré tout, la fonction comporte quelques défauts :
  • elle ne peut trier que par le texte affiché et non par la valeur (dans ce cas, on pourrait remplacer optionsList[i].text par optionsList[i].value)
  • il s'agit d'un tri alphanumérique donc sur une liste comportant des libellés ou des valeurs de 1 à 99, l'ordre logique positionnerait 10 immédiatement après 1 (plutôt qu'à la suite de 9)
  • l'opérateur de comparaison force le tri ascendant (dans ce cas, de A à Z)
  • ce n'est peut-être pas le meilleur algorithme de tri pour la performance
Bien sûr, la fonction aurait pu être améliorée pour être plus flexible pour des projets futurs et c'est seulement après l'avoir écrite que je me suis souvenu qu'il y a presqu'un an, j'avais utilisé le plugin jQuery TinySort pour résoudre un problème similaire sur le DOM.

J'ai relu mon propre billet, je l'ai mis à l'essai et presque par magie, TinySort contourne avec brio les défauts mentionnés plus haut. De plus, une seule ligne de code facile à lire suffit :
$j('#mySelectBox option').tsort({'attr':'text', 'order': 'asc'});
J'ai fait disparaître ma fonction pour la remplacer par ce petit plugin dont j'apprécie maintenant encore plus l'utilité.


Tags: JavaScript

3 réponses à "Bubblesort en JavaScript"

  1. Anonyme a dit...
    3 novembre 2011 à 04 h 01

    Sans compter qu'il est probable que tinysort utilise quelque chose d'un brin plus efficace que le tri à bulle :D

    Anonyme a dit...
    21 novembre 2011 à 05 h 51

    "ce n'est peut-être pas le meilleur algorithme de tri pour la performance"

    En vérité, le bubblesort est probablement le pire. ^^

    Infinite Loop a dit...
    21 novembre 2011 à 06 h 59

    Il faudrait voir la version non minifiée/compressée de TinySort pour connaître son algorithme. Quelqu'un l'a fait ?

    Le bubblesort n'est pas le plus efficace mais pour moins de 10 éléments à trier, on n'en fera pas un débat ;)


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (55)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ▼  2011 (146)
      • ►  décembre 2011 (14)
      • ▼  novembre 2011 (11)
        • Le plaisir insoupçonné de manger du Velveeta
        • Choisir le bon symbole
        • Citation no. 140 sur le voyage
        • Une petite leçon d'humilité
        • Ne laissez pas le chaos l'emporter
        • Citation no. 139 sur les logiciels
        • À l'attention des ados révoltés
        • Connaître la version de SQL Server pour les nuls
        • Combien de personnes dans chaque groupe d'âge
        • 20 choses supplémentaires à savoir sur Google (par...
        • Bubblesort en JavaScript
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (429)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (36)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft