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 >