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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
| var Triable = function(elt, options){
// Options :
// exclure : (chaine) nom de classe pour exclure des colonnes du tri ou pour empêcher une ligne th d'être cliquable (dans ce cas, c'est le comportement inverse de classeTH. Défaut : rien
// numstrict : (booléen) les numériques peuvent contenir des caractères alpha (par exemple des unités) après les chiffres. Défaut : true
// classeTH : (chaine) la classe des lignes th cliquables. Par défaut, ils le sont tous (sauf avec la classe eclure. !!! La classe s'applique au tr !!! Défaut : rien
// classeNum : (chaine) nom de classe pour forcer un tri numérique. Défaut : numTri
// classeCh : (chaine) nom de classe pour forcer un tri textuel. Défaut : txtTri
// classeDate : (chaine) nom de classe pour forcer un tri par date (format : 'JJ/MM/AAAA'). Défaut : dateTri
this.elt = elt || document.getElementsByTagName('table')[0];
options = options || {};
this.exclure = options.exclure || false;
this.numstrict = options.numstrict || true;
this.classeTH = options.classeTH || '';
this.classeNum = options.classeNum || 'numTri';
this.classeCh = options.classeCh || 'txtTri';
this.classeDate = options.classeDate || 'dateTri';
this.base = this.elt.getElementsByTagName('tr');
this.separateur = '_';
this.getSeparateur();
var i = this.base.length, j;
this.en_cours = 0;
this.valeurs = [];
this.affichage = [];
this.typeTri = [];
var that, lavaleur, baseLigne;
while(i){
i--;
if(this.base[i].getElementsByTagName('th').length>0 && this.base[i].className.match(this.classeTH)){
baseLigne = this.base[i].getElementsByTagName('th');
j = baseLigne.length;
while(j){
j--;
if (baseLigne[j].className.match(this.exclure) || this.base[i].className.match(this.exclure)) {
continue;
}
if(!this.typeTri[j]){
this.typeTri[j] = baseLigne[j].className.match(this.classeCh) || baseLigne[j].className.match(this.classeNum) || '';
}
baseLigne[j].ref = j;
baseLigne[j].style.cursor = 'pointer';
that = this;
this.addEvent(baseLigne[j], 'click', function(e){
var origine = e.target?e.target:window.event.srcElement;
if (origine.ref == that.en_cours) {
that.retourne();
}
else {
that.multisort(origine.ref, origine.className);
that.en_cours = origine.ref;
}
that.affiche();
});
}
}
else if(this.base[i].getElementsByTagName('td').length>0){
j = this.base[i].getElementsByTagName('td').length;
var tabValeurs = [];
while(j){
j--;
if(!this.typeTri[j] && this.base[i].getElementsByTagName('td')[j].innerHTML.replace(/^[\s\n\t]+[.]+[\s\n\t]+$/g,'').match(/^(\d{1,2})\/(\d{1,2})\/(\d{2})(\d{2})?$/)){
this.typeTri[j] = this.classeDate;
}
tabValeurs.push(this.base[i].getElementsByTagName('td')[j].innerHTML.replace(/^[\s\n\t]+[.]+[\s\n\t]+$/g,''));
}
this.valeurs.push(tabValeurs.reverse().join(this.separateur));
this.affichage.push(i);
}
}
this.multisort(this.en_cours);
this.affiche();
}
Triable.prototype.addEvent = function(element, type, callback){
if (element.attachEvent){
element.attachEvent("on" + type, callback);
}
else{
element.addEventListener(type, callback, false);
}
}
Triable.prototype.gestClic = function(){
if(this.ref == that.en_cours){
that.retourne();
}
else{
that.multisort(this.ref);
}
that.affiche();
}
Triable.prototype.multisort = function(position){
var separateur = this.separateur;
switch (this.typeTri[position].toString()) {
case this.classeCh:
this.valeurs.sort(function(b, a){
a = a.split(separateur)[position].toLowerCase();
b = b.split(separateur)[position].toLowerCase();
return a == b ? 0 : a < b ? -1 : 1;
});
break;
case this.classeNum:
this.valeurs.sort(function(b, a){
a = parseFloat(a.split(separateur)[position].replace(/[^\d\.]*/g, '')) || 0;
b = parseFloat(b.split(separateur)[position].replace(/[^\d\.]*/g, '')) || 0;
return a == b ? 0 : a < b ? -1 : 1;
});
break;
case this.classeDate:
this.valeurs.sort(function(b, a){
a = new Date(parseInt(a.split('/')[2],10), parseInt(a.split('/')[1],10) - 1, parseInt(a.split('/')[0],10));
b = new Date(parseInt(b.split('/')[2],10), parseInt(b.split('/')[1],10) - 1, parseInt(b.split('/')[0],10));
return a == b ? 0 : a < b ? -1 : 1;
});
break;
default:
this.valeurs.sort(function(b, a){
a = a.split(separateur)[position].toLowerCase();
b = b.split(separateur)[position].toLowerCase();
if (this.numstrict) {
a = (parseFloat(a) == a) ? parseFloat(a) : a;
b = (parseFloat(b) == b) ? parseFloat(b) : b;
}
else
if (!isNaN(parseFloat(a)) && !isNaN(parseFloat(b))) {
a = parseFloat(a);
b = parseFloat(b);
}
if (a === b) {
return 0;
}
if (typeof a === typeof b) {
return a < b ? -1 : 1;
}
return typeof a < typeof b ? -1 : 1;
});
}
}
Triable.prototype.retourne = function(){
this.valeurs.reverse();
}
Triable.prototype.affiche = function(){
for(var i=0; i<this.affichage.length; i++){
for(var j=0; j<this.base[this.affichage[i]].getElementsByTagName('td').length; j++){
this.base[this.affichage[i]].getElementsByTagName('td')[j].innerHTML = this.valeurs[i].split(this.separateur)[j];
}
}
}
Triable.prototype.getSeparateur = function(){
var lesElements = this.elt.getElementsByTagName('td');
var nbElements = lesElements.length;
while(nbElements){
nbElements--;
while(lesElements[nbElements].innerHTML.match(this.separateur)){
this.separateur += '_';
}
}
} |
Partager