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

 

     之前研究过一下表格排序。上网找了一些代码研究了一下。勉强做了一个用着。后面发现当动态给单元格加超链接，或者列中存在一些空白，就排序不了了。

代码: 仿一个网友的代码写的，不记得出自哪里了，改成可以支持中文排序，而且支持控件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，一直很想学的。可惜公司用不到，其实是学了之后还是觉得用的到。 知道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：当然这个插件还有很多扩展功能，例如多列排序，各种例子等都有文档可以参考的。原文件和例子网上应该挺多的。有需要的 童鞋  可以留个邮箱给我