JavaScript Sort 表格排序

更新時(shí)間：2009年10月31日 23:21:54 作者：

JavaScript表格排序?qū)崿F(xiàn)代碼，需要的朋友可以參考下。

1.你真的懂JavaScript里面的Sort方法嗎？
2.你知道JavaScript中 localeCompare 方法的函數(shù)體嗎？
3.表格排序方法要哪些參數(shù)？
　　JavaScript中的sort方法直接就提供了排序的功能，不需要我們自己寫個(gè)循環(huán)一個(gè)個(gè)的判斷。但其機(jī)制仍然是那樣的，

復(fù)制代碼代碼如下:

 
window.onload=function(){ 
var MyArr=new Array("red","green","gray"); 
MyArr.sort(); 
alert(MyArr.toString()); 
} 

輸出的結(jié)果為 gray,green,red;那如果為整數(shù)呢？

復(fù)制代碼代碼如下:

 
window.onload=function(){ 
var MyArr=new Array(2,25,7); 
MyArr.sort(); 
alert(MyArr.toString()); 
} 

如果你認(rèn)為是 2，7，25 ；那么很高興的說聲你錯(cuò)了，它的結(jié)果是 2，25，7，為什么呢？因?yàn)閟ort方法它是以字符串的ASCII來判斷的，任何非字符串都將會(huì)先轉(zhuǎn)換為字符串，
從而出現(xiàn)了上述情況。那我要對整數(shù)排序怎么辦呢？轉(zhuǎn)換唄，很簡單，但是假如有 Float,Date，等等呢？都一樣，寫個(gè)轉(zhuǎn)換函數(shù)不就得了。說了就得做。

復(fù)制代碼代碼如下:

 
function convert(DataValue,DataType){ 
switch(DataType){ 
case "int": 
return parseInt(DataValue); 
case "float": 
return parseFloat(DataValue); 
case "date": 
return new Date(Date.parse(DataValue)); 
default: 
return DataValue.toString(); 
} 
} 

一個(gè)很簡單的轉(zhuǎn)換方法就出來了，大家注意一下Date，因?yàn)樗菍ο?，所以與基本類型不同，每次都會(huì)生成一個(gè)新的對象。
Sort 方法可以有個(gè)參數(shù)為sortfunction，
先看個(gè)簡單的排序方法

復(fù)制代碼代碼如下:

 
function compare_function(value1,value2){ 
if(value1<value2) 
return -1; 
else if(value1>value2) 
return 1; 
else 
return 0; 
} 

其實(shí) localeCompare 函數(shù)與其也差不多。當(dāng) value1小于value2時(shí)，返回-1，即順序排列，將value1<value2，返回1，即逆時(shí)排序。
回到重點(diǎn)，要對表格排序，點(diǎn)擊表格頭部即可排序，那么必須要有一個(gè)方法，取之為SortTable,那要對表格的某一列排序，要具備哪些參數(shù)呢？首先要一個(gè)表格ID來確定哪個(gè)表格，其次要
確定要排序的是哪一列，最后每一列的數(shù)據(jù)不一定都是字符串，所以要一個(gè)數(shù)據(jù)類型的參數(shù)，也就是 SortTable(TableID,Col,DataType);

復(fù)制代碼代碼如下:

 
var DTable=document.getElementById(TableID); 
var DBody=DTable.tBodies[0]; 
var DataRows=DBody.rows; 
var MyArr=new Array; 
//將所有的行放入數(shù)組 
for(var i=0;i<DataRows.length;i++){ 
MyArr[i]=DataRows[i]; 
} 
MyArr.sort(CustomCompare(Col,DataType)); 
//創(chuàng)建一個(gè)文檔碎片，將所有的行都添加進(jìn)去，相當(dāng)于一個(gè)暫存架，目的是（如果直接加到document.body里面，會(huì)插入一行，就刷新一次，如果數(shù)據(jù)多了就會(huì)影響用戶體驗(yàn)） 
//先將行全部放在暫存架里面，然后將暫存架里面的行 一起添加到document.body，這樣表格只會(huì)刷新一次。 
//就像你去商店購物，要先將要買的物品（行）全部寫在單子上（文檔碎片），然后超市全部購買，而不會(huì)想到一樣?xùn)|西就去一次，那么 
var frag=document.createDocumentFragment(); 
for(var i=0;i<MyArr.length;i++){ 
frag.appendChild(MyArr[i]); //將數(shù)組里的行全部添加到文檔碎片中 
} 
DBody.appendChild(frag);//將文檔碎片中的行全部添加到 body中 

這樣就可以完成一個(gè)排序，那么其中有個(gè) CustomCompare 函數(shù)，為自定義的一個(gè)排序方法來作為Sort方法的參數(shù)，它兩個(gè)參數(shù)，一個(gè)為排序的列，一個(gè)為數(shù)據(jù)類型。
函數(shù)體為

復(fù)制代碼代碼如下:

 
return function CompareTRs(TR1,TR2){ 
var value1,value2; 
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType); 
value2=convert(TR2.cells[Col].firstChild.nodeValue,DataType); 
if(value1 < value2) 
return -1; 
else if(value1 > value2) 
return 1; 
else 
return 0; 
}; 

當(dāng)然，能寫成這樣的形式要拜閉包所賜。在sort方法中遍歷數(shù)組中的每一項(xiàng)（每一項(xiàng)存儲(chǔ)的都是table得每一行）并會(huì)將參數(shù)傳入 CompareTRs(TR1,TR2)中，然后返回結(jié)果。
其實(shí)這樣就OK，但是如果要對圖片排序怎么辦？
圖片是什么類型的？不知道，那我們?nèi)∏梢幌拢陀脠D片的標(biāo)題，或者alt屬性，它們總可以是字符串吧。給它們一個(gè)自定義屬性 customvalue，然后一句它的值來排序。只是在實(shí)現(xiàn)的時(shí)候
要判斷是否含有此屬性，那么就要對CompareTRs方法修改了。

復(fù)制代碼代碼如下:

 
function CustomCompare(Col,DataType){ 
return function CompareTRs(TR1,TR2){ 
var value1,value2; 
//判斷是不是有customvalue這個(gè)屬性 
if(TR1.cells[Col].getAttribute("customvalue")){ 
value1=convert(TR1.cells[Col].getAttribute("customvalue"),DataType); 
value2=convert(TR2.cells[Col].getAttribute("customvalue"),DataType); 
} 
else{ 
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType); 
value2=convert(TR2.cells[Col].firstChild.nodeValue,DataType); 
} 
if(value1 < value2) 
return -1; 
else if(value1 > value2) 
return 1; 
else 
return 0; 
}; 
} 

對圖片的排序也解決了。那如果用戶要多次排序，點(diǎn)好幾次呢？我們是不是還要修改CompareTRs方法呢？
很明顯是不需要的，JavaScript中有個(gè) reverse()方法可以將數(shù)組中的每項(xiàng)都倒過來。對SortTable方法的修改只需如此如此

復(fù)制代碼代碼如下:

 
function SortTable(TableID,Col,DataType){ 
var DTable=document.getElementById(TableID); 
var DBody=DTable.tBodies[0]; 
var DataRows=DBody.rows; 
var MyArr=new Array; 
for(var i=0;i<DataRows.length;i++){ 
MyArr[i]=DataRows[i]; 
} 
//判斷上次排序的列和這次是否為同一列 
if(DBody.CurrentCol==Col){ 
MyArr.reverse(); //將數(shù)組倒置 
} 
else{ 
MyArr.sort(CustomCompare(Col,DataType)); 
} 
//創(chuàng)建一個(gè)文檔碎片，將所有的行都添加進(jìn)去，相當(dāng)于一個(gè)暫存架，目的是（如果直接加到document.body里面，會(huì)插入一行，就刷新一次，如果數(shù)據(jù)多了就會(huì)影響用戶體驗(yàn)） 
//先將行全部放在暫存架里面，然后將暫存架里面的行 一起添加到document.body，這樣表格只會(huì)刷新一次。 
//就像你去商店購物，要先將要買的物品（行）全部寫在單子上（文檔碎片），然后超市全部購買，而不會(huì)想到一樣?xùn)|西就去一次，那么 
var frag=document.createDocumentFragment(); 
for(var i=0;i<MyArr.length;i++){ 
frag.appendChild(MyArr[i]); //將數(shù)組里的行全部添加到文檔碎片中 
} 
DBody.appendChild(frag);//將文檔碎片中的行全部添加到 body中 
DBody.CurrentCol=Col; //記錄下當(dāng)前排序的列 
} 

JavaScript中的大小寫一定要注意，很容易出錯(cuò)的。
以上代碼測試成功，對日期的排序，效果如圖

所有代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>表格排序</title> 
<script type="text/javascript"> 
var IsAsc=true; 
function SortTable(TableID,Col,DataType){ 
var imgSort=document.getElementById('col'+Col); 
//判斷是逆序還是順序 
if(IsAsc==true){ 
imgSort.src='img/arrow_small_down.png'; 
} 
else{ 
imgSort.src='img/arrow_small_up.png'; 
} 
IsAsc=!IsAsc; 
var DTable=document.getElementById(TableID); 
var DBody=DTable.tBodies[0]; 
var DataRows=DBody.rows; 
var MyArr=new Array; 
for(var i=0;i<DataRows.length;i++){ 
MyArr[i]=DataRows[i]; 
} 
//判斷上次排序的列和這次是否為同一列 
if(DBody.CurrentCol==Col){ 
MyArr.reverse(); //將數(shù)組倒置 
} 
else{ 
MyArr.sort(CustomCompare(Col,DataType)); 
} 
//創(chuàng)建一個(gè)文檔碎片，將所有的行都添加進(jìn)去，相當(dāng)于一個(gè)暫存架，目的是（如果直接加到document.body里面，會(huì)插入一行，就刷新一次，如果數(shù)據(jù)多了就會(huì)影響用戶體驗(yàn)） 
//先將行全部放在暫存架里面，然后將暫存架里面的行 一起添加到document.body，這樣表格只會(huì)刷新一次。 
//就像你去商店購物，要先將要買的物品（行）全部寫在單子上（文檔碎片），然后超市全部購買，而不會(huì)想到一樣?xùn)|西就去一次，那么 
var frag=document.createDocumentFragment(); 
for(var i=0;i<MyArr.length;i++){ 
frag.appendChild(MyArr[i]); //將數(shù)組里的行全部添加到文檔碎片中 
} 
DBody.appendChild(frag);//將文檔碎片中的行全部添加到 body中 
DBody.CurrentCol=Col; //記錄下當(dāng)前排序的列 
} 
function CustomCompare(Col,DataType){ 
return function CompareTRs(TR1,TR2){ 
var value1,value2; 
//判斷是不是有customvalue這個(gè)屬性 
if(TR1.cells[Col].getAttribute("customvalue")){ 
value1=convert(TR1.cells[Col].getAttribute("customvalue"),DataType); 
value2=convert(TR2.cells[Col].getAttribute("customvalue"),DataType); 
} 
else{ 
value1=convert(TR1.cells[Col].firstChild.nodeValue,DataType); 
value2=convert(TR2.cells[Col].firstChild.nodeValue,DataType); 
} 
if(value1 < value2) 
return -1; 
else if(value1 > value2) 
return 1; 
else 
return 0; 
}; 
} 
function convert(DataValue,DataType){ 
switch(DataType){ 
case "int": 
return parseInt(DataValue); 
case "float": 
return parseFloat(DataValue); 
case "date": 
return new Date(Date.parse(DataValue)); 
default: 
return DataValue.toString(); 
} 
} 
</script> 
</head> 
<body> 
<div id="container"> 
<table border="1" id="MyTable"> 
<thead> 
<tr> 
<td onclick="SortTable('MyTable',0,'string')" style="cursor:pointer">圖片排序&nbsp;<img id="col0" src="img/arrow_small_up.png" /> </td> 
<td onclick="SortTable('MyTable',1,'int')" style="cursor:pointer">整數(shù)排序&nbsp;<img id="col1" src="img/arrow_small_up.png" /></td> 
<td onclick="SortTable('MyTable',2,'float')" style="cursor:pointer">浮點(diǎn)數(shù)排序<img id="col2" src="img/arrow_small_up.png" /></td> 
<td onclick="SortTable('MyTable',3,'string')" style="cursor:pointer">字符串排序<img id="col3" src="img/arrow_small_up.png" /></td> 
<td onclick="SortTable('MyTable',4,'date')" style="cursor:pointer">日期排序&nbsp;<img id="col4" src="img/arrow_small_up.png" /></td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td customvalue="doc"> 
<img src="img/wordicon.gif" /></td> 
<td>2</td> 
<td>5.4</td> 
<td>zd</td> 
<td>2009-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="zip"> 
<img src="img/zippedfoldericon.gif" /></td> 
<td>267</td> 
<td>8.9</td> 
<td>xx</td> 
<td>2002-10-31 14:36:13</td> 
</tr> 
<tr> 
<td customvalue="xlt"> 
<img src="img/excelicon.gif" /></td> 
<td>6</td> 
<td>60.4</td> 
<td>ty</td> 
<td>2009-10-31 19:33:13</td> 
</tr> 
<tr> 
<td customvalue="txt"> 
<img src="img/notepadicon.gif" /></td> 
<td>9</td> 
<td>0.8</td> 
<td>lp;</td> 
<td>2004-5-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="doc"> 
<img src="img/wordicon.gif" /></td> 
<td>34</td> 
<td>9.4</td> 
<td>cv</td> 
<td>1009-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="txt"> 
<img src="img/notepadicon.gif" /></td> 
<td>289</td> 
<td>23.4</td> 
<td>uio</td> 
<td>2005-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="zip"> 
<img src="img/zippedfoldericon.gif" /></td> 
<td>45</td> 
<td>89.4</td> 
<td>cb</td> 
<td>1039-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="doc"> 
<img src="img/wordicon.gif" /></td> 
<td>2</td> 
<td>5.4</td> 
<td>zd</td> 
<td>2009-10-31 14:33:13</td> 
</tr> 
<tr> 
<td customvalue="txt"> 
<img src="img/notepadicon.gif" /></td> 
<td>42</td> 
<td>9.3</td> 
<td>bm</td> 
<td>1069-10-31 14:34:14</td> 
</tr> 
</tbody> 
</table> 
</div> 
</body> 
</html> 