這次帶給大家jquery實作依照中文表格排序，jquery實作依照中文表格排序的注意事項有哪些，以下就是實戰案例，一起來看一下。
//转换器，将列的字段类型转换为可以排序的类型：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 =='cn')
{
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=='asc')
{
if(sDataType=='int')
{
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 >0 ? 1 : -1);
}
else if(sDataType =='cn')
{
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
}
}
/*排序方法（主函数）登入後複製
sTableID 表格的id
iCol表示列索引
1,當不是input類型時，iCol表示的是tr的第幾個td;
2,當是input類型時，則iCol表示在這個tr中的第幾個input;
sDataType表示該cell的資料型別或該input的value 的資料型別.預設是string，也可以int, float. cn是中文
isinput表示排序的內容是不是input(1是, 0否)
sDec表示倒序還是順序(desc, 預設順序), 避免出現input值改變之後再排序時候出現直接倒序的情況。
*/
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);
}登入後複製
這週終於有時間研究jquery，一直很想學的。可惜公司用不到，其實是學了之後還是覺得用的到。知道jqery後就看了一下別人的插件。 jquery.tablesorter.js 這個外掛功能挺強大。試了一下，發現不支持中文的。看看原始碼在說
/* 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;
};登入後複製
一開始還以為會遇到一些困難的。沒想到，我只要把他的排序函數改一下就ok啦.
function sortText(a,b) {
return a.localeCompare(b);
};
function sortTextDesc(a,b) {
return -a.localeCompare(b);
};登入後複製
測試一下。中文，中英文一起，中間有列為空等都沒問題了。
本來這個插件是有一個jquery.tablesorter.pack.js 壓縮過後的才9kb，可是我只會改jquery.tablesorter.js （23kb）。要怎麼把它變成jquery.tablesorter.pack.js 就不知道了。
ps：當然這個外掛還有很多擴充功能，例如多列排序，各種例子等都有文件可以參考的。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
jquery實作表格分頁與排序
#jQuery跨域對iframe介面呼叫（附程式碼）
#
以上是jquery實作依據中文表格排序的詳細內容。更多資訊請關注PHP中文網其他相關文章！
