js表格的排序操作

谢谢：http://dennis-zane.javaeye.com/blog/58864

备忘——javascript操作表格排序

表格排序，一般的处理方法是传递排序的字段到后台进行重新查询并排序，javascript也可以做到简单的表格排序，备忘代码：

           //类型 转换器，将列的字段类型转换为可以排序的类型：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();
                
                }
            }
            
             // 排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型
             function  generateCompareTRs(iCol, sDataType) {
        
                 return    function  compareTRs(oTR1, oTR2) {
                             var  vValue1  =  convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
                             var  vValue2  =  convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);

   //2010年11月26日14:05:45 lambert 

  // 这里如果表格中的是input text类型的输入框的话，也能进行排序，此时

   //注意oTR1.cells[iCol].firstChild.nodeValue  -----》 oTR1.cells[iCol].innerHtml 

    // 就可以了，起始取出的是按照String进行排序的。

        
                             if  (vValue1  <  vValue2) {
                                 return   - 1 ;
                            }  else   if  (vValue1  >  vValue2) {
                                 return   1 ;
                            }  else  {
                                 return   0 ;
                            }
                        };
            }
            
             // 排序方法
             function  sortTable(sTableID, iCol, sDataType) {
                 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];
                }
                 
                 // 判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序
                 if  (oTable.sortCol  ==  iCol) {
                    aTRs.reverse();
                }  else  {
                     // 使用数组的sort方法，传进排序函数
                    aTRs.sort(generateCompareTRs(iCol, sDataType));
                }
        
                 var  oFragment  =  document.createDocumentFragment();
                 for  ( var  i = 0 ; i  <  aTRs.length; i ++ ) {
                    oFragment.appendChild(aTRs[i]);
                }
       
                oTBody.appendChild(oFragment);
                 // 记录最后一次排序的列索引
                oTable.sortCol  =  iCol;
            }

完整例子：

< html >
     < head >
     < title > Table Sort Example </ title >
         < script type = " text/javascript " >
            
             // 转换器，将列的字段类型转换为可以排序的类型：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();
                
                }
            }
            
             // 排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型
             function  generateCompareTRs(iCol, sDataType) {
        
                 return    function  compareTRs(oTR1, oTR2) {
                             var  vValue1  =  convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
                             var  vValue2  =  convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
        
                             if  (vValue1  <  vValue2) {
                                 return   - 1 ;
                            }  else   if  (vValue1  >  vValue2) {
                                 return   1 ;
                            }  else  {
                                 return   0 ;
                            }
                        };
            }
            
             // 排序方法
             function  sortTable(sTableID, iCol, sDataType) {
                 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];
                }
                 
                 // 判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序
                 if  (oTable.sortCol  ==  iCol) {
                    aTRs.reverse();
                }  else  {
                     // 使用数组的sort方法，传进排序函数
                    aTRs.sort(generateCompareTRs(iCol, sDataType));
                }
        
                 var  oFragment  =  document.createDocumentFragment();
                 for  ( var  i = 0 ; i  <  aTRs.length; i ++ ) {
                    oFragment.appendChild(aTRs[i]);
                }
       
                oTBody.appendChild(oFragment);
                 // 记录最后一次排序的列索引
                oTable.sortCol  =  iCol;
            }

         </ script >
     </ head >
     < body >
         < p > Click on the table header to sort  in  ascending order. </ p >
         < table border = " 1 "  id = " tblSort " >
             < thead >
                 < tr >
                     < th onclick = " sortTable('tblSort', 0) "  
                        style = " cursor:pointer " > Last Name </ th >
                     < th onclick = " sortTable('tblSort', 1) "  
                        style = " cursor:pointer " > First Name </ th >
                     < th onclick = " sortTable('tblSort', 2, 'date') "  
                        style = " cursor:pointer " > Birthday </ th >
                     < th onclick = " sortTable('tblSort', 3, 'int') "  
                        style = " cursor:pointer " > Siblings </ th >
                 </ tr >
             </ thead >
             < tbody >
                 < tr >
                     < td > Smith </ td >
                     < td > John </ td >
                     < td > 7 / 12 / 1978 </ td >
                     < td > 2 </ td >
                 </ tr >
                 < tr >
                     < td > Johnson </ td >
                     < td > Betty </ td >
                     < td > 10 / 15 / 1977 </ td >
                     < td > 4 </ td >
                 </ tr >
                 < tr >
                     < td > Henderson </ td >
                     < td > Nathan </ td >
                     < td > 2 / 25 / 1949 </ td >
                     < td > 1 </ td >
                 </ tr >
                 < tr >
                     < td > Williams </ td >
                     < td > James </ td >
                     < td > 7 / 8 / 1980 </ td >
                     < td > 4 </ td >
                 </ tr >
                 < tr >
                     < td > Gilliam </ td >
                     < td > Michael </ td >
                     < td > 7 / 22 / 1949 </ td >
                     < td > 1 </ td >
                 </ tr >
                 < tr >
                     < td > Walker </ td >
                     < td > Matthew </ td >
                     < td > 1 / 14 / 2000 </ td >
                     < td > 3 </ td >
                 </ tr >
             </ tbody >
         </ table >         
     </ body >
</ html >

俺按照上面的进行了项目中的一些嵌入处理的，是可以用的。