JavaScript学习笔记——表格排序

最新推荐文章于 2023-03-20 10:58:33 发布

liaoxueli

最新推荐文章于 2023-03-20 10:58:33 发布

阅读量128

点赞数

分类专栏： javaScript 文章标签： JavaScript 算法 .net ViewUI

本文链接：https://blog.csdn.net/liaoxueli/article/details/83370642

版权

javaScript 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

说明：本文为《JavaScript高级程序设计》第12章“表格排序”学习笔记。
一．起点——数组

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


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

 arr.sort();

 alert(arr.toString()); //输出2，3，32，5

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()); //输出2，3，5，32

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

arr.reverse()p;

alert(arr.toString()); //输出32，5，3，2

二．对表格进行排序

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


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

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