说明：本文为《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;
}
}
}
posted on 2007-08-20 23:12
阿蜜果 阅读(1764)
评论(7) 编辑 收藏 所属分类:
Javascript