js 对table表格排序

对于table表格排序,是开发中很长用到得技术。今天把客户端排序完善了一下,它兼容数字、字符、日期、汉字、百分数等排序功能。

 

如下

对于数字类型列:

整型οnclick=sortTable('tableID',1,'int');

浮点型οnclick=sortTable('tableID',1,'int');

对于日期型列:

οnclick=sortTable('tableID',1,'date');

对于字符串型列:

如:οnclick=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();

    }

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值