posts - 297,  comments - 1618,  trackbacks - 0
  说明:本文为《JavaScript高级程序设计》第12章“表格排序”学习笔记。

一.起点——数组

 首先介绍一下Array对象的sort()方法,见下例所示:

 var arr = [3, 32, 2, 5];

 arr.sort();

 alert(arr.toString()); //输出23325

 sort()方法还可以接受一个参数,即比较函数,来告诉比较算法值与值之间是大小、小于还是等于关系。代码如下所示:

 function compareIntegers(vNum1, vNum2) {
    
var iNum1 = parseInt(vNum1);
    
var iNum2 = parseInt(vNum2);
    
if (iNum1 < iNum2) {
       
return -1;
}
 else if (iNum1 > iNum2) {
       
return 1;
}
 else {
       
return 0;
}

}

 如果把这个比较函数应用到前面的例子中,将返回正确的结果:

 var arr = [3, 32, 2, 5];

 arr.sort(compareIntegers);

 alert(arr.toString()); //输出23532

 reverse()方法可将数组中元素的顺序倒转。在上面代码后使用一下reverse()方法,例:

 arr.reverse()p;

 alert(arr.toString()); //输出32532

二. 对表格进行排序

 下面来看一段表格的代码:

  <table border=”1” id=”tblSort”>
       
<thead>
              
<tr>
                     
<th>昵称</th>
              
</tr>
       
</thead>
       
<tbody>
              
<tr>
                     
<td>阿蜜果</td>
              
</tr>
              
<tr>
                     
<td>娟子</td>
              
</tr>
              
<tr>
                     
<td>sterning</td>
              
</tr>
       
</tbody>
<table>

1.       比较函数localeCompare()

使用localeCompare()函数来对<tr/>元素进行排序。见下例:

function compare(otr1, otr2) {
        
var sValue1 = otr1.cells[0].firstChild.nodeValue;
        
var sValue2 = otr2.cells[0].firstChild.nodeValue;
        
return sValue1.localeCompare(sValue2);
}

2.       sortTable()函数

function sortTable(sTableID) {
        
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];
}


aTRs.sort(compareTRs);
var oFragment = document.createDocumentFragment();
for (var i=0; i<aTRs.length; i++{
       oFragment.appendChild(aTRs[i]);
}

oTBody.appendChild(oFragment);
}

调用举例如下:

<table border=”1” id=”tblSort”>
       
<thead>
              
<tr>
                     
<th onclick=”sortTable(‘tblSort’)” style=”cursor:pointer”>昵称</th>
              
</tr>
       
</thead>
       
<tbody>
              
<!—data rows-->
       
</tbody>
</table>

三.对多列表格进行排序

 在第二节中的例子中多增加一列,让我们来看看怎么进行排序。

1.       比较函数生成器

function generateCompareTRs(iCol) {
       
return function compareTRs(otr1, otr2) {
              
var sValue1 = otr1.cells[0].firstChild.nodeValue;
               
var sValue2 = otr2.cells[0].firstChild.nodeValue;
               
return sValue1.localeCompare(sValue2);
}

}

调用方法举例:

var compareTRs = generateCompareTRs(0);

var compareTRs1 = generateCompareTRs(1);

var compareTRs2 = generateCompareTRs(2);

2.       修改sortTable()方法

因为要接受另一个要排序的索引的参数,所以需要将这个索引值传递给generateCompareTRs()函数,修改后的sortTable()方法如下:

function sortTable(sTableID, iCol) {
        
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];
}

aTRs.sort(generateCompareTRs(iCol));
var oFragment = document.createDocumentFragment();
for (var i=0; i<aTRs.length; i++{
       oFragment.appendChild(aTRs[i]);
}

oTBody.appendChild(oFragment);
}

3.       逆序排列

要实现逆序排列,需修改sortTable()函数为如下内容:

function sortTable(sTableID, iCol) {
        
var oTable = document.getElementById(sTableID);
        
var oTBody = oTable.tBodies[0];
        
var cold   ataRows = oTBody.rows;
        
var aTRs = new Array;
        
for (var i=0; i< colDataRows.length; i++{
       aTRs[i] 
= colDataRows[i];
}


if (oTable.sortCol == iCol) {
       aTRs.reverse();
}
 else {
aTRs.sort(generateCompareTRs(iCol));
}


var oFragment = document.createDocumentFragment();
for (var i=0; i<aTRs.length; i++{
       oFragment.appendChild(aTRs[i]);
}

oTBody.appendChild(oFragment);
oTable.sotCol 
= iCol;
}

4.       对不同的数据类型进行排序

1)创建转换函数

前面的例子只是对字符串进行排序,当然,还有很多其他的情况,首先让我们创建一个转换函数,代码如下:

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();
}

}

2)修改代码

 首先修改generateCompareTRs()方法为如下内容:

function generateCompareTRs(iCol, sDataType) {
    
return function compare(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;
}

}


}

同时修改sortTable()为如下内容:

function sortTable(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
        
var oTBody = oTable.tBodies[0];
        
var cold   ataRows = oTBody.rows;
        
var aTRs = new Array;
        
for (var i=0; i< colDataRows.length; i++{
       aTRs[i] 
= colDataRows[i];
}

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.sotCol 
= iCol;
}

5.       高级排序

很少有表格只包含普通的数据类型,常常会包含链接、图像或某种HTML内容,在这种情况下若需要对其进行排序,则还需要修改相关代码才能实现,下面来看一段表格内容:

<table border=”1” id=”tblSort”?
        
<thead>
               
<tr>
                      
<th>类型</th>
                      
<th>文件名</th>
               
</tr>
        
</thead>
        
<tbody>
               
<tr>
                      
<td value=”doc”><image src=”images/wordicon.gif” /></td>
                      
<td>简历.doc</td>
               
</tr>
               …
        
</tbody>
</table>

在此种情况下还需修改generateCompareTRs()方法,修改后的代码如下

function generateCompareTRs(iCol, sDataType) {
           
return function compare(otr1, otr2) {
                  
var vValue1, vValue2;
                  
if (oTR1.cells[iCol].getAttribute(“value”)) {
                     vValue1 
= convert(otr1.cells[iCol].getAttribute(“value”), sDataType);
                     vValue2 
= convert(otr2.cells[iCol].getAttribute(“value”), sDataType);
}
 else {
                     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;
}

}

}

 

              

posted on 2007-08-20 23:12 阿蜜果 阅读(1764) 评论(7)  编辑  收藏 所属分类: Javascript


FeedBack:
# re: JavaScript学习笔记——表格排序
2007-08-21 19:30 | JAVA-HE
我觉得那书上的表格排序不好。当时书上给的某个方法,我就发现有些问题。
好像是: document.createDocumentFragment();
不知道你试过没有。不过我倒真有兼容性非常好的代码。改天分享出来。当时找到了一个不错的,后来发现如果要兼容IE5 还是不那么顺利,后来终于发现一个好的。  回复  更多评论
  
# re: JavaScript学习笔记——表格排序[未登录]
2007-08-21 21:14 | 阿蜜果
@JAVA-HE
拿出来啊
给咱们学习一下
嘻嘻  回复  更多评论
  
# re: JavaScript学习笔记——表格排序
2007-08-23 14:08 | mortal
假如点击第一次进行正向排序,
请问怎样实现点击第二次的时候进行反向排序?  回复  更多评论
  
# re: JavaScript学习笔记——表格排序
2007-08-23 22:35 | 阿蜜果
@mortal
3. 逆序排列中那段代码可以实现你想要的功能的。  回复  更多评论
  
# re: JavaScript学习笔记——表格排序
2007-08-23 23:48 | -274°C
我共享一个非常好用的表格排序组件,呵呵。
http://www.blogjava.net/Files/JAVA-HE/tablesort.zip
  回复  更多评论
  
# re: JavaScript学习笔记——表格排序
2007-08-24 00:07 | 阿蜜果
@-274°C
谢谢分享  回复  更多评论
  
# re: JavaScript学习笔记——表格排序[未登录]
2007-10-08 11:34 | abc
To:mortal
在sortTable方法里加點東西就可以实现点击第二次的时候进行反向排序
function sortTable(sTableID){
var oTable=document.getElementById(sTableID);
var sortBy;
if(oTable.getAttribute("sortBy")==null){
oTable.setAttribute("sortBy","Asc");
}else if(oTable.getAttribute("sortBy")=="Asc"){
oTable.setAttribute("sortBy","Desc");
sortBy="Desc";
}else if(oTable.getAttribute("sortBy")=="Desc"){
oTable.setAttribute("sortBy","Asc");
}
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];
}

aTRs.sort(compareTRs);
if(sortBy=="Desc"){
aTRs.reverse();
}

var oFragment=document.createDocumentFragment();
for(var i=0;i<aTRs.length;i++){
oFragment.appendChild(aTRs[i]);
}

oTBody.appendChild(oFragment);
}
  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2007年8月>
2930311234
567891011
12131415161718
19202122232425
2627282930311
2345678

      生活将我们磨圆,是为了让我们滚得更远——“圆”来如此。
      我的作品:
      玩转Axure RP  (2015年12月出版)
      

      Power Designer系统分析与建模实战  (2015年7月出版)
      
     Struts2+Hibernate3+Spring2   (2010年5月出版)
     

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

  • 积分 - 2285123
  • 排名 - 3

最新评论

阅读排行榜

评论排行榜