JavaScript Sort 表格排序

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1.你真的懂JavaScript裡面的Sort方法嗎？
2.你知道JavaScript中 localeCompare 方法的函數體嗎？
3.表格排序方法要哪些參數？
　　JavaScript中的sort方法直接就提供了排序的功能，不需要我們自己寫個迴圈一個個的判斷。但其機制仍然是那樣的，複製代碼代碼如下:window.onload=function(){
var MyArr=new Array("red","green","gray");
MyArr.sort();
alert(MyArr.toString());
}

輸出的結果為 gray,green,red;那如果為整數呢？複製代碼代碼如下:window.onload=function(){
var MyArr=new Array(2,25,7);
MyArr.sort();
alert(MyArr.toString());
}

如果你認為是 2，7，25 ；那麼很高興的說聲你錯了，它的結果是 2，25，7，為什麼呢？因為sort方法它是以字串的ASCII來判斷的，任何非字串都將會先轉換為字串，
從而出現了上述情況。那我要對整數排序怎麼辦呢？轉換唄，很簡單，但是假如有 Float,Date，等等呢？都一樣，寫個轉換函式不就得了。說了就得做。複製代碼代碼如下: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();
}
}

一個很簡單的轉換方法就出來了，大家注意一下Date，因為它是對象，所以與基本類型不同，每次都會產生一個新的對象。
Sort 方法可以有個參數為sortfunction，
先看個簡單的排序方法複製代碼代碼如下:function compare_function(value1,value2){
if(value1<value2)
return -1;
else if(value1>value2)
return 1;
else
return 0;
}

其實 localeCompare 函數與其也差不多。當 value1小於value2時，返回-1，即順序排列，將value1<value2，返回1，即逆時排序。
回到重點，要對錶格排序，點擊表格頭部即可排序，那麼必須要有一個方法，取之為SortTable,那要對錶格的某一列排序，要具備哪些參數呢？首先要一個表格ID來確定哪個表格，其次要
確定要排序的是哪一列，最後每一列的資料不一定都是字串，所以要一個資料類型的參數，也就是 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];
}
MyArr.sort(CustomCompare(Col,DataType));
//建立一個文檔片段，將所有的行都添加進去，相當於一個暫存架，目的是（如果直接加到document.body裡面，會插入一行，就重新整理一次，如果資料多了就會影響使用者體驗）
//先將行全部放在暫存架裡面，然後將暫存架裡面的行一起添加到document.body，這樣表格只會重新整理一次。
//就像你去商店購物，要先將要買的物品（行）全部寫在單子上（文檔片段），然後超市全部購買，而不會想到一樣東西就去一次，那麼
var frag=document.createDocumentFragment();
for(var i=0;i<MyArr.length;i++){
frag.appendChild(MyArr[i]); //將數組裡的行全部添加到文檔片段中
}
DBody.appendChild(frag);//將文檔片段中的行全部添加到 body中

這樣就可以完成一個排序，那麼其中有個 CustomCompare 函數，為自訂的一個排序方法來作為Sort方法的參數，它兩個參數，一個為排序的列，一個為資料類型。
函數體為複製代碼代碼如下: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;
};

當然，能寫成這樣的形式要拜閉包所賜。在sort方法中遍曆數組中的每一項（每一項儲存的都是table得每一行）並會將參數傳入 CompareTRs(TR1,TR2)中，然後返回結果。
其實這樣就OK，但是如果要對圖片排序怎麼辦？
圖片是什麼類型的？不知道，那我們取巧一下，就用圖片的標題，或者alt屬性，它們總可以是字串吧。給它們一個自訂屬性 customvalue，然後一句它的值來排序。只是在實現的時候
要判斷是否含有此屬性，那麼就要對CompareTRs方法修改了。複製代碼代碼如下:function CustomCompare(Col,DataType){
return function CompareTRs(TR1,TR2){
var value1,value2;
//判斷是不是有customvalue這個屬性
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;
};
}

對圖片的排序也解決了。那如果使用者要多次排序，點好幾次呢？我們是不是還要修改CompareTRs方法呢？
很明顯是不需要的，JavaScript中有個 reverse()方法可以將數組中的每項都倒過來。對SortTable方法的修改只需如此如此複製代碼代碼如下: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(); //將數組倒置
}
else{
MyArr.sort(CustomCompare(Col,DataType));
}
//建立一個文檔片段，將所有的行都添加進去，相當於一個暫存架，目的是（如果直接加到document.body裡面，會插入一行，就重新整理一次，如果資料多了就會影響使用者體驗）
//先將行全部放在暫存架裡面，然後將暫存架裡面的行一起添加到document.body，這樣表格只會重新整理一次。
//就像你去商店購物，要先將要買的物品（行）全部寫在單子上（文檔片段），然後超市全部購買，而不會想到一樣東西就去一次，那麼
var frag=document.createDocumentFragment();
for(var i=0;i<MyArr.length;i++){
frag.appendChild(MyArr[i]); //將數組裡的行全部添加到文檔片段中
}
DBody.appendChild(frag);//將文檔片段中的行全部添加到 body中
DBody.CurrentCol=Col; //記錄下當前排序的列
}

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

所有代碼：複製代碼代碼如下:<!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(); //將數組倒置
}
else{
MyArr.sort(CustomCompare(Col,DataType));
}
//建立一個文檔片段，將所有的行都添加進去，相當於一個暫存架，目的是（如果直接加到document.body裡面，會插入一行，就重新整理一次，如果資料多了就會影響使用者體驗）
//先將行全部放在暫存架裡面，然後將暫存架裡面的行一起添加到document.body，這樣表格只會重新整理一次。
//就像你去商店購物，要先將要買的物品（行）全部寫在單子上（文檔片段），然後超市全部購買，而不會想到一樣東西就去一次，那麼
var frag=document.createDocumentFragment();
for(var i=0;i<MyArr.length;i++){
frag.appendChild(MyArr[i]); //將數組裡的行全部添加到文檔片段中
}
DBody.appendChild(frag);//將文檔片段中的行全部添加到 body中
DBody.CurrentCol=Col; //記錄下當前排序的列
}
function CustomCompare(Col,DataType){
return function CompareTRs(TR1,TR2){
var value1,value2;
//判斷是不是有customvalue這個屬性
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">圖片排序 <img id="col0" src="img/arrow_small_up.png" /> </td>
<td onclick="SortTable('MyTable',1,'int')" style="cursor:pointer">整數排序 <img id="col1" src="img/arrow_small_up.png" /></td>
<td onclick="SortTable('MyTable',2,'float')" style="cursor:pointer">浮點數排序<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">日期排序 <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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More