js高级表格排序

源码无需任何修改,直接复制即可,建议放在head区,最好单独存一个js文件然后在head区引用进来。
然后为每个要排序的表格设置一个id,比如此例中的tb_1。记得这个table需要thead和tbody元素,否则dom节点解析会出错。thead里放一行标题,建议用th,然后为每个th加入以下属性:onclick="sortTable('tb_1', *)" style="cursor:pointer;",第2个style是为了让鼠标指上去发生变化(变成手指),第1个是点击事件。
其中tb_1即是这个table的ID,紧随的*符号是列号,第1个th就用0,第2个用1……以此类推。默认的这种属性是按字母排列的,如果这列是整数排列的话请加入第3个参数'int',就像这样:onclick="sortTable('tb_1', *, 'int')" style="cursor:pointer;",如果带有小数请用参数'float',如果是日期请用'date'。
另外不是以上类型的比较时——比如图片排序——请在每个图片前加入隐藏div域,例子请看本例,隐藏div的方法是将它设置display:hidden;即可。这样图片便按照隐藏div域里的文字内容排序。

想研究代码的人读下思想:
基本注释都很完善了。设置id的目的就是为了在点击标题发生事件时传入这个table的id参数,在js里获取这个id从而找到这个table的dom节 点,然后通过相应节点访问方法把每行tr的指针存入一个数组,对数组进行排序。值得注意的是排完顺序的数组不是直接把tr指针写入文件,这样会大大增加开 销;而是创建了一个文档碎片放入排好顺序的内容后在appand到tbody上。注意这里数组存的是tr节点,由于节点都是指针引用,因此可以直接附上而 无需先删除原有tr再增加了。

还值得一说的就是数组的sort方法,它接受一个函数参数,用这个可以指定排序方法。这个参数很神奇,我也是第一次看到这种方式的调用,好用且古怪的感觉……

<table width="550" align="center" cellpadding="0" cellspacing="0" id="tb_1">
<thead>
    
<tr>
     
<th width="7%" onclick="sortTable('tb_1', 0)" style="cursor:pointer;">代码</th>
     <th onclick="sortTable('tb_1', 1)" style="cursor:pointer;" />图</th>
     
<th width="18%" onclick="sortTable('tb_1', 2)" style="cursor:pointer;">英文名</th>
     <th width="18%" onclick="sortTable('tb_1', 3)" style="cursor:pointer;">日文名</th>
     <th align="center" onclick="sortTable('tb_1', 4)" style="cursor:pointer;">作用</th>
     <th width="10%" onclick="sortTable('tb_1', 5, 'int')" style="cursor:pointer;">Gil</th>
    </tr>
</thead>
        <tbody>
        
<tr>
         
<td>sadsa</td>
         <td>1111</td>
         <td>112</td>
         <td>3232</td>
         <td>32321</td>
         <td>313131</td>
         </tr>

         
<tr>
         
<td>aw3123</td>
         <td>dadaf3423</td>
         <td>112</td>
         <td>dasd</td>
         <td>32321</td>
         <td>313131</td>
         </tr>

         
<tr>
         
<td>sadadadasdadsa</td>
         <td>11adasdas11</td>
         <td>112</td>
         <td>dasdad</td>
         <td>32sad321</td>
         <td>sadadsa</td>
         </tr>

         
<tr>
         
<td>sads553453a</td>
         <td>1s111</td>
         <td>hd</td>
         <td>32u32</td>
         <td>32tuyiu321</td>
         <td>iuyiy</td>
         </tr>
    </tbody>
<table>

<script type="text/javascript">

function convert(sValue, sDataType) {
     
//将要排序的数据转换成对应的数据类型,第2个参数默认没有即为String类型比较
     switch(sDataType) {
       
case "int":
         
return parseInt(sValue);
       
case "float":
         
return parseFloat(sValue);
       
case "date":
         
return new Date(Date.parse(sValue));
       
default:
         
return sValue.toString();  
     }
}

function generateCompareTRs(iCol, sDataType) {
     
//闭包比较函数,用以数组的sort()方法调用
     return function compareTRs(oTR1, oTR2) {
       
var vValue1, vValue2;
       
if(oTR1.cells[iCol].firstChild != oTR1.cells[iCol].lastChild) {
         
//当所比较对象不是数值、字符串、日期等基本类型时,隐藏的<div />标识节点和比较节点不相等
         vValue1 = convert(oTR1.cells[iCol].firstChild.firstChild.nodeValue, sDataType);
         vValue2 
= convert(oTR2.cells[iCol].firstChild.firstChild.nodeValue, sDataType);
       }
       
else {
         
//或者比较基本类型时,此行<tr />只有要比较的内容一个节点,自己等于自己
         vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
         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(); //创建一个数组将全部<tr />的指针放入
  
     
for (var i=0; i < colDataRows.length; i++) {
       aTRs[i] 
= colDataRows[i];
     }
   
     
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>

 

 

 

posted @ 2009-06-30 10:30 TONYBINLJ 阅读(...) 评论(...) 编辑 收藏