js 对table报表排序

js 对table表格排序

对于table表格排序，是开发中很长用到得技术。今天把客户端排序完善了一下，它兼容数字、字符、日期、汉字、百分数等排序功能。如下对于数字类型列：整型onclick=sortTable('tableID',1,'int');浮点型onclick=sortTable('tableID',1,'int');对于日期型列：onclick=sortTable('tableID',1,'date');对于字符串型列：如：onclick=sortTable('tableID',1);对于百分数的列（如：36%）：如：sortTable('tableID',5,'float',1);// 对table表格排序的处理TableSort.js 文件代码如下：//ie和FireFox的处理function ieOrFireFox(obj){    if(obj.textContent != null)    {        return obj.textContent;    }    else    {        var s = obj.innerText;        return s.substring(0,s.length);     }}//对table排序。//参数 ---tableId:表的id，iCol:列索引；dataType:iCol对应的列排序显示数据的类型，removeRight:排序时去掉列的右边的字符个数function sortTable(tableId,iCol,dataType,removeRight){    var table = document.getElementById(tableId);    //给排序列标题改变颜色////////////////////    var thead = table.childNodes[0];    var tr = thead.childNodes[0];    var thNew = tr.childNodes[iCol];    if(table.sortCol != null)    {        var thOld = tr.childNodes[table.sortCol];        thOld.style.color="Black"    }    thNew.style.color="Blue"    ///////////////////////////////////////////    var tbody = table.tBodies[0];    var colRows = tbody.rows;    var aTrs = new Array;//定义数组    //将得到的列放入数组，备用    for(var i = 0;i<colRows.length;i++)    {        aTrs[i] = colRows[i];    }    //判断上一次排列和现在需要排列的是否同一个    if(table.sortCol == iCol)    {        aTrs.reverse();    }    else    {   //如果不是同一列，使用sort方法传进排序函数        aTrs.sort(compareEle(iCol,dataType,removeRight));    }    var oFragment = document.createDocumentFragment();    for(var i =0;i<aTrs.length;i++)    {        oFragment.appendChild(aTrs[i]);    }    tbody.appendChild(oFragment);    table.sortCol = iCol;//记录最后一次排序的列索引}//排序函数，iCol：列索引，dataType:列数据类型function compareEle(iCol,dataType,removeRight){    return function(oTR1,oTR2)    {        var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]),dataType,removeRight);        var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]),dataType,removeRight);        if(typeof(vValue1)=='string')        { // 汉字排序单独处理            return vValue1.localeCompare(vValue2);        }        else        {            if(vValue1<vValue2)            {                return -1;            }            else if(vValue1>vValue2)            {                return 1;            }            else            {                return 0;            }         }    };}//将列的类型转换成相应的可以排序的数据类型function convert(sValue,dataType,removeRight){    if(removeRight!=null)    {        var newLen = sValue.length - removeRight;        sValue=sValue.substr(0,newLen);    }    switch(dataType)    {        case "int":            return parseInt(sValue);        case "float":            return parseFloat(sValue);        case "date":            return new Date(Date.parse(sValue));        default:            return sValue.toString();    }}

?