js操作table排序

/**
* js操作table排序类
* --------------------------------
* 页面调用 SetOrder(tbody, obj, index, options)
*  @tbody : table.tbody
*  @obj   : td.head.a
*  @index : td.cellIndex 默认-1自动获取cellIndex, 如果列中存在隐藏列需指定cellIndex
*  @option: 参数
*  demo: 
*    SetOrder("idList", "idTitle", -1); 
*    SetOrder("idList", "idExt", -1, { Attribute: "_ext" }); 
*    SetOrder("idList", "idAddtime", -1, { Attribute: "_order", DataType: "date" }); 
*    SetOrder("idList", "idSize", -1, { Attribute: "_order", DataType: "int" }); 
* --------------------------------
*/
var $ = function (id) { 
    return "string" == typeof id ? document.getElementById(id) : id; 
}; 
var Class = { 
    create: function() { 
        return function() { 
            this.initialize.apply(this, arguments); 
        } 
    } 
} 
Object.extend = function(destination, source) { 
    for (var property in source) { 
        destination[property] = source[property]; 
    } 
    return destination; 
} 
function Each(list, fun){ 
    for (var i = 0, len = list.length; i < len; i++) {         
        fun(list[i], i); 
    } 
}; 
///////////////////////////////////// 
//////////////////////////////// 
var TableOrder = Class.create(); 
TableOrder.prototype = { 
initialize: function(tbody) { 
    var oThis = this; 
     
    this.Body = $(tbody);//tbody对象 
    this.Rows = [];//行集合 
     
    Each(this.Body.rows, function(o){ oThis.Rows.push(o); }) 
}, 
//排序并显示 
Sort: function(order) {     
    //排序 
    this.Rows.sort(this.Compare(order)); 
    //alert(order.Down + '\n' +this.Rows[0].innerHTML);
    order.Down && this.Rows.reverse(); 
    //显示表格 
    var oFragment = document.createDocumentFragment();     
    Each(this.Rows, function(o){ oFragment.appendChild(o); });     
    this.Body.appendChild(oFragment); 
}, 
//比较函数 
Compare: function(order) { 
    var oThis = this; 
    return function(o1, o2) { 
        var value1 = oThis.GetValue(o1, order), value2 = oThis.GetValue(o2, order); 
        return value1 < value2 ? -1 : value1 > value2 ? 1 : 0; 
    }; 
}, 
//获取比较值 
GetValue: function(tr, order) { 
    var data = tr.getElementsByTagName("td")[order.Index].getAttribute(order.Attribute); 
    //数据转换 
    switch (order.DataType.toLowerCase()) { 
        case "int": 
            return parseInt(data) || 0; 
        case "float": 
            return parseFloat(data) || 0; 
        case "date": 
            return Date.parse(data) || 0; 
        case "string": 
        default: 
            return data.toString() || ""; 
    } 
}, 
//添加并返回一个排序对象 
Add: function(index, options) { 
    var oThis = this; 
    return new function(){ 
        //默认属性 
        this.Attribute = "innerHTML";//获取数据的属性 
        this.DataType = "string";//数据类型 
        this.Down = false;//是否按顺序 
        Object.extend(this, options || {}); 
        //排序对象的属性 
        this.Index = index; 
        this.Sort = function(){ oThis.Sort(this); }; 
    }; 
} 
} 
var to = null;// = new TableOrder("idList"); 
function SetOrder(tbody, obj, index, options){ 
    if(to == null) {
        to = new TableOrder(tbody);
    }
    var o = $(obj); 
    //alert(o.parentElement.cellIndex + ' -- ' + index);
    if(isNaN(parseInt(index)) || parseInt(index)<0) {        
        index = o.parentElement.cellIndex;
    } else {
        index = parseInt(index);
    }
    //添加一个排序对象 
    var order = to.Add(index, options); 
    o.onclick = function(){ 
        //取相反排序 
        order.Down = !order.Down; 
        //设置样式 
        Each(SetOrder._arr, function(o){ o.className = ""; }) 
        o.className = order.Down ? "down" : "up"; 
        //排序显示 
        order.Sort(); 
        return false; 
    } 
    //_arr是记录排序项目（这里主要用来设置样式） 
    SetOrder._arr ? SetOrder._arr.push(o) : SetOrder._arr = []; 
}  

 

.main_table a{outline:none; hide-focus:expression(this.hideFocus=true); text-decoration:none; color:#124F98; } 
.main_table thead a{padding-right:15px;} 
.main_table thead a.up{ background:url(../images/up.gif) right center no-repeat; } 
.main_table thead a.down{background:url(../images/down.gif) right center no-repeat;} 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>table排序示例</title> 
<link type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/systemGYL.css">
</head> 
<body id="main_content">
    <div id="exp.messages">
    </div>
    <form name="form1" method="post" action="">
        <input type="hidden" name="apply" value="1">
        <input type="hidden" name="q_type" value="1">
        <table class="common_table">
            <tr>
                <td class="head">
                    <span id="nav">js table排序示例</span> <span id="help" onclick="return showHelp('');">
                    </span>
                </td>
            </tr>
            
        </table>
        <table class="main_table">
           <thead> 
<tr> 
<td class="head"><a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td> 
<td class="head"><a href="javascript:void(0)" id="idAddtime" class="up">上传时间</a></td> 
<td class="head"><a href="javascript:void(0)" id="idSize">大小</a></td> 
</tr> 
</thead> 
<tbody id="idList"> 
<tr> 
<td _ext="rar">new.rar</td> 
<td align="center" _order="2008/9/12 8:51:09">2008-9-12 8:51:09</td> 
<td align="right" _order="433247">423.09 K</td> 
</tr> 
<tr> 
<td _ext="js">TagControl.js</td> 
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> 
<td align="right" _order="1387">1.35 K</td> 
</tr> 
<tr> 
<td _ext="js">Scroller.js</td> 
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> 
<td align="right" _order="2556">2.5 K</td> 
</tr> 
<tr> 
<td _ext="js">AlertBox.js</td> 
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> 
<td align="right" _order="3565">3.48 K</td> 
</tr> 
<tr> 
<td _ext="htm">1.htm</td> 
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td> 
<td align="right" _order="11394">11.13 K</td> 
</tr> 
<tr> 
<td _ext="htm">4.htm</td> 
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td> 
<td align="right" _order="351">351 b</td> 
</tr> 
<tr> 
<td _ext="xml">news.xml</td> 
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> 
<td align="right" _order="14074">13.74 K</td> 
</tr> 
<tr> 
<td _ext="xsl">news.xsl</td> 
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> 
<td align="right" _order="16796">16.4 K</td> 
</tr> 
<tr> 
<td _ext="js">function.js</td> 
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> 
<td align="right" _order="2844">2.78 K</td> 
</tr> 
</tbody> 
</table> 
<script type="text/javascript" src="tableSort.js"></script>
<script type="text/javascript"> 
SetOrder("idList", "idTitle", -1); 
SetOrder("idList", "idExt", -1, { Attribute: "_ext" }); 
SetOrder("idList", "idAddtime", -1, { Attribute: "_order", DataType: "date" }); 
SetOrder("idList", "idSize", -1, { Attribute: "_order", DataType: "int" }); 
</script> 
        <table class="common_table_querytool">
            <tr>
                <td>
                </td>
                <td align="right">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>