javaGrowing

Dom +　Javascript 在本機瀏覽器中對的表格數據進行排序

在本機瀏覽器中對的表格數據進行排序
在Web應用中，數據從服務器端返回到客戶端，以表格形式表現出來。如果要對數據集按指定的列排序顯示，常規做法都是向服務器發出請求，服務器端程序重新從數據庫中取出按指定列排序的數據，返回給客戶端，頁面重新顯示排序后數據。
?
采用這種方式有如下缺點：
1- 響應時間延遲，每次排序都要向服務器端發送請求，等待結果返回，同時增加網絡負載。
2- 編程復雜，可維護性差，而且客戶端和服務器端代碼耦合度很高，客戶端和服務器端都要處理排序涉及的列名、排序方式，如果有分頁和查詢條件，都需要在客戶端頁面中保留，排序請求時重新傳遞到服務器端，當參數數量很多時極易出錯。
3- 重用度很低，針對不同表格，很難抽象出一個公共程序來共用，需要逐個編寫代碼實現，增加工作量。
?
現在換一個角度考慮，數據既然已下載到了客戶端，在重新排序時沒有必要再重服務器端獲取，只要對瀏覽器中的數據重新排序顯示就可以了。要實現該目標，需要做到以下幾點：
1 - 獲得表格中要排序的數據，將其放入一個2維數組中。
2 - 對2維數組排序。
3 - 用排序后的數據重新更新表格。
?
利用瀏覽器支持的DOM(Document Object Model)和JavaScript即可實現上述目標。
?
通常頁面中會很多的<table>，要獲得需要排序數據所在的table，需要在<table>中增加一個id屬性，便于document對象用getElementById得到該表格對象，例如要排序的表格定義如下：
?<table id="st" >
??? <tr>
??????? <td>1</td>
??????? <td>2</td>
??? </tr>
</table>
?
在javascript中，用var objTable = document.getElementById("st")就可得到表格對象，該對象在DOM中定義為一個Element。
?
然 后用 var objRows = objTable.getElementsByTagName("tr")得到該表格中全部的行對象，ObjRows.length返回該表格行數； var rowi = objRows[i].getElementsByTagName("td")得到第i行的全部<td>節點，i從0開始計數， rowi.item(j)則可得到第i行，第j列的節點，該節點的innerHTML為該節點<td></td>之間的內容。
?
獲取表格數據到2維數組的代碼見源代碼，此處略。
?
下面說明在javascript中2維數組的構造和排序。
javascript不支持2維數組，因此需要用數組的數組來模擬一個2維數組，其方法是先定義一個1維數組，元素個數為2維數組的行數，然后對每個元素賦一個值，值為一個數組，其元素個數為2維數組的列數。構造代碼如下：
?
var rows = new Array(R);? //R為行數
for(var i = 0; i < rows.length; i++){
??? rows[i] = new Array(C);??? //C為列數
}
?
?
利用javascript中的Array.sort(comparer)對rows中的元素排序，比較方式由重新定義的比較函數得到。要根據第j列元素的大小排序，只要定義如下函數即可：
?
function compareCol(a,b){
???
??? if (a[j] < b[j])
??????? return -1;
?
??? if (a[j] > b[j])
??????? return 1;
?
?? return 0;
?
}
?
因為compareCol只能有兩個參數，因此j要定義為全局變量。
?
用rows.sort (compareCol)就可實現根據j列值的大小對行進行排序。根據javascript文檔，字符串比較大小是按照其Unicode編碼的大小來比 較，對英文排序沒有問題，對中文排序時就不是按通常的拼音排序，那需要javascript提供本地化支持，目前沒有發現javascript此功能。該 功能在java中可用java.text.Collator實現。
?
?
?以上介紹了在本地對瀏覽器中的數據進行排序的主要思想， 為方便使用，將這些功能進行了封裝，以javascript函數的提供，存放在sorttable.js文件中，在需要的頁面中用<script type=text/javascript src='sorttable.js'></script>引入。
?
?
?下面說明排序函數原型和使用方法。
?
函數1 function sortTable(tableId,sortCol,compareType)
對頁面中指定表格中的數據進行排序，通常第一行為標題行，排序時從第二行開始，第一次調用為升序排列，第二次為降序排列，依次輪換。
tableId??? 為<table id=''>中id的值，在同一個頁面中要唯一。
sortCol??? 排序時用來比較大小的數據所在的列，從1開始計數。
compareType 排序時比較大小的方式，s-按字符串比較大小，n-按數字比較大小。
?
?
?
?函數2 function sortTableInRange(tableId,sortCol,compareType,startRow,endRow,startCol,endCol)
?
??????? 對表格中指定的區域數據排序，有時數據第一列為流水號，最后一行為合計，這些數據不需要參與排序，可用此函數來對部分數據排序。
???????
??????? tableId??? 為<table id=''>中id的值，在同一個頁面中要唯一。
??????? sortCol??? 排序時用來比較大小的數據所在的列，從1開始計數。
??????? compareType 排序時比較大小的方式，s-按字符串比較大小，n-按數字比較大小。
??????? startRow,endRow 要排序區域開始和結束行號，從1開始計數。例如對第2行到第7行排序，startRow=2，endRow=7
??????? startCol,endCol? 要排序區域開始和結束列號，從1開始計數。
?
?
?
?
?
存在的問題：
1- 中文不能按拼音排序。
?
?
要注意的問題：
要排序的table必須用ID標示，并要作為參數傳給排序函數，表格中的數據應該是可以排序的，否則結果不可預知；要排序的表格不能有嵌套表，否則排序出錯。
?
?
本函數已在IE6.0 ,FireFox1.01中運行通過。源代碼和例子代碼見后。
?
?
?
?
參考資料：
?
Danny Goodman with Michael Morrison?? JavaScript Bible 5th? ,John Wiley and Sons? 2004
?
David Flanagan? JavaScript The Definitive Guide 4th ,? O'Reilly? 2001
?
?
?
?
?
?附源代碼：要運行例子，需要將javascript代碼保存到sorttable.js文件中，html部分代碼保存到同一目錄下另一文件中即可。
?
?
sorttable.js
?
?