說明：本文為《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
阿蜜果 閱讀(1782)
評論(7) 編輯 收藏 所屬分類:
Javascript