jquery tablesorter.js 支持中文表格排序改進(jìn)

更新時(shí)間：2009年12月09日 04:46:32 作者：

之前研究過一下表格排序。上網(wǎng)找了一些代碼研究了一下。勉強(qiáng)做了一個(gè)用著。后面發(fā)現(xiàn)當(dāng)動態(tài)給單元格加超鏈接，或者列中存在一些空白，就排序不了了。

代碼: 仿一個(gè)網(wǎng)友的代碼寫的，不記得出自哪里了，改成可以支持中文排序，而且支持控件value的排序。沒辦法，能力有限，只能。。。

 
//轉(zhuǎn)換器，將列的字段類型轉(zhuǎn)換為可以排序的類型：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); 
} 
//排序函數(shù)產(chǎn)生器 
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 
} 
} 
/*排序方法（主函數(shù)） 
sTableID 表格的id 
iCol表示列索引 
1,當(dāng)不是input類型時(shí)，iCol表示的是tr的第幾個(gè)td; 
2,當(dāng)是input類型時(shí)，則iCol表示在這個(gè)tr中的第幾個(gè)input; 
sDataType表示該cell的數(shù)據(jù)類型或者該input的value 的數(shù)據(jù)類型. 默認(rèn)是string，也可以int, float. cn是中文 
isinput表示排序的內(nèi)容是不是input(1是, 0否) 
sDec表示倒序還是順序(desc, 默認(rèn)順序), 避免出現(xiàn)input值改變之后再排序時(shí)候出現(xiàn)直接倒序的情況。 
*/ 
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; 
//將所有列放入數(shù)組 
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); 
} 

這個(gè)星期終于有時(shí)間研究一下jquery，一直很想學(xué)的?？上Ч居貌坏?，其實(shí)是學(xué)了之后還是覺得用的到。知道jqery后就看了一下別人的插件。jquery.tablesorter.js 這個(gè)插件功能挺強(qiáng)大。試了一下，發(fā)現(xiàn)不支持中文的。看看源碼在說

復(fù)制代碼代碼如下:

 
/* 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; 
}; 

一開始還以為會遇到一些困難的。沒想到，我只需要把他的排序函數(shù)改一下就ok啦.

復(fù)制代碼代碼如下:

 
function sortText(a,b) { 
return a.localeCompare(b); 
}; 
function sortTextDesc(a,b) { 
return -a.localeCompare(b); 
}; 

測試一下。中文，中英文一起，中間有列為空等都沒問題了。
本來這個(gè)插件是有一個(gè)jquery.tablesorter.pack.js 壓縮過后的才9kb，可是我只會改jquery.tablesorter.js （23kb）。要怎么把它變成jquery.tablesorter.pack.js 就不知道了。

ps：當(dāng)然這個(gè)插件還有很多擴(kuò)展功能，例如多列排序，各種例子等都有文檔可以參考的。原文件和例子網(wǎng)上應(yīng)該挺多的。有需要的童鞋可以留個(gè)郵箱給我

您可能感興趣的文章: