jquery tablesorter.js 支持中文表格排序改进

jquery tablesorter 中文排序实现原理

基于网络上的示例代码进行了调整，旨在实现中文排序功能，并支持对控件 value 值的排序。由于个人能力限制，仅能做到此程度。

 
// 类型转换器，将列字段转换为可排序类型：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 tablesorter 源码步骤

本周终于有时间研究 jquery，一直很想学习。虽然公司目前未使用，但自学后觉得仍有价值。在了解 jquery 后，我查看了相关插件。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;
}; 

起初以为会遇到困难，没想到只需修改排序函数即可解决问题。

 
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）。关于如何将其重新打包为压缩版尚不清楚。

ps：该插件还支持多列排序等扩展功能，具体示例可参考官方文档。原版文件及示例在网上较多，如有需要可留下邮箱联系。