Maison > interface Web > js tutoriel > jquery implémente le tri selon les tables chinoises

jquery implémente le tri selon les tables chinoises

php中世界最好的语言
Libérer: 2018-04-26 16:10:07
original
1704 Les gens l'ont consulté

Cette fois, je vais vous proposer jquery pour trier selon les tables chinoises. Quelles sont les précautions pour que jquery implémente le tri selon les tables chinoises. Ce qui suit est un cas pratique, jetons un coup d'œil.

//转换器,将列的字段类型转换为可以排序的类型:String,int,float 
function convert(sValue, sDataType) 
{ 
switch(sDataType) 
{ 
case "int": 
return parseInt(sValue); 
case "float": 
return parseFloat(sValue); 
case "date": 
return new Date(Date.parse(sValue)); 
default: 
return sValue.toString(); 
} 
} 
// 汉字排序方法 
function chrComp(a,b) 
{ 
return a.localeCompare(b); 
} 
//排序函数产生器 
function generateCompareTRs(iCol, sDataType,isinput,sDec) 
{ 
return function compareTRs(oTR1, oTR2) 
{ 
if(isinput == 1) 
{ 
var vValue1 = convert(oTR1.getElementsByTagName("input")[iCol].value); 
var vValue2 = convert(oTR2.getElementsByTagName("input")[iCol].value); 
} 
else 
{ 
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); 
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); 
} 
if(sDec=='desc') 
{ 
if(sDataType=='int') 
{ 
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 <0 ? 1 : -1); 
} 
else if(sDataType ==&#39;cn&#39;) 
{ 
if(chrComp(vValue1,vValue2)>0) 
{ 
return -1; 
} 
else if(chrComp(vValue1,vValue2)<0) 
{ 
return 1; 
} 
else 
{ 
return 0; 
} 
} 
else 
{ 
if (vValue1 > vValue2) { 
return -1; 
} else if (vValue1 < vValue2) { 
return 1; 
} else { 
return 0; 
} 
} 
} 
else if(sDec==&#39;asc&#39;) 
{ 
if(sDataType==&#39;int&#39;) 
{ 
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 >0 ? 1 : -1); 
} 
else if(sDataType ==&#39;cn&#39;) 
{ 
return chrComp(vValue1,vValue2); 
} 
else 
{ 
if (vValue1 > vValue2) { 
return 1; 
} else if (vValue1 < vValue2) { 
return -1; 
} else { 
return 0; 
} 
} 
} 
}; 
} 
//重置单元格的classname 
function ChangeClsName(tr,num) 
{ 
num = num%2?1:2; 
num.toString(); 
for ( var i = 0 ; i < tr.childNodes.length; i ++ ) 
{ 
tr.childNodes[i].className = "row" + num 
} 
} 
/*排序方法(主函数)
Copier après la connexion

ID de table sTableID
iCol représente l'index de colonne
1, lorsqu'il ne s'agit pas d'un type d'entrée, iCol représente le td de tr
2, lorsqu'il s'agit d'un type d'entrée, iCol représente le numéro d'entrée dans ce tr ;
sDataType représente le type de données de la cellule ou le type de données de la valeur de l'entrée. La valeur par défaut est une chaîne, mais elle peut également être int, float. . cn est le chinois
isinput indique si le contenu trié est saisi (1 oui, 0 non)
sDec indique l'ordre inverse ou l'ordre (desc, ordre par défaut), pour éviter l'ordre inverse direct lors du tri après le changement de la valeur d'entrée. . Condition.

*/ 
function sortTable(sTableID, iCol, sDataType, isinput, sDec) 
{ 
var oTable = 
document
.getElementById(sTableID); 
var oTBody = oTable.tBodies[0]; 
var colDataRows = oTBody.rows; 
var aTRs = new Array; 
//将所有列放入数组 
for (var i=0; i < colDataRows.length; i++) 
{ 
aTRs[i] = colDataRows[i]; 
} 
aTRs.sort(generateCompareTRs(iCol, sDataType,isinput, sDec)); 
var oFragment = document.createDocumentFragment(); 
for (var i=0; i < aTRs.length; i++) 
{ 
oFragment.appendChild(aTRs[i]); 
ChangeClsName(aTRs[i],i); 
} 
oTBody.appendChild(oFragment); 
}
Copier après la connexion

J'ai enfin le temps d'étudier jquery cette semaine, ce que j'ai toujours voulu apprendre. C'est dommage que l'entreprise ne puisse pas l'utiliser. En fait, après l'avoir appris, j'ai toujours l'impression qu'il peut être utilisé. Après avoir connu jqery, j'ai regardé les plug-ins d'autres personnes. jquery.tablesorter.js Ce plug-in est assez puissant. Je l'ai essayé et j'ai découvert qu'il ne prend pas en charge le chinois. Regardez le code source et il est écrit

/* sorting methods */ 
function multisort(table,sortList,cache) { 
if(table.config.debug) { var sortTime = new Date(); } 
var dynamicExp = "var sortWrapper = function(a,b) {", l = sortList.length; 
for(var i=0; i < l; i++) { 
var c = sortList[i][0]; 
var order = sortList[i][1]; 
var s = (getCachedSortType(table.config.parsers,c) == "text") ? ((order == 0) ? "sortText" : "sortTextDesc") : ((order == 0) ? "sortNumeric" : "sortNumericDesc"); 
var e = "e" + i; 
dynamicExp += "var " + e + " = " + s + "(a[" + c + "],b[" + c + "]); "; 
dynamicExp += "if(" + e + ") { return " + e + "; } "; 
dynamicExp += "else { "; 
} 
for(var i=0; i < l; i++) { 
dynamicExp += "}; "; 
} 
dynamicExp += "return 0; "; 
dynamicExp += "}; "; 
eval(dynamicExp); 
cache.normalized.sort(sortWrapper); 
if(table.config.debug) { benchmark("Sorting on " + sortList.toString() + " and dir " + order+ " time:", sortTime); } 
return cache; 
}; 
function sortText(a,b) { 
return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
}; 
function sortTextDesc(a,b) { 
return ((b < a) ? -1 : ((b > a) ? 1 : 0)); 
}; 
function sortNumeric(a,b) { 
return a-b; 
}; 
function sortNumericDesc(a,b) { 
return b-a; 
}; 
function getCachedSortType(parsers,i) { 
return parsers[i].type; 
};
Copier après la connexion

Au début, je pensais rencontrer quelques difficultés. De façon inattendue, il me suffit de changer sa fonction de tri et tout ira bien

function sortText(a,b) { 
return a.localeCompare(b); 
}; 
function sortTextDesc(a,b) { 
return -a.localeCompare(b); 
};
Copier après la connexion

Testez-le. Chinois, chinois et anglais ensemble, s'il y a une colonne au milieu, ce ne sera pas un problème.
À l'origine, ce plug-in a jquery.tablesorter.pack.js qui ne fait que 9 Ko après compression, mais je ne changerai que jquery.tablesorter.js (23 Ko). Je ne sais pas comment le transformer en jquery.tablesorter.pack.js.
ps : Bien entendu, ce plug-in dispose également de nombreuses fonctions étendues, comme le tri multi-colonnes, divers exemples, etc.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jquery implémente la pagination et le tri des tables

Appel d'interface iframe inter-domaines jQuery (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal