javaGrowing

Dom +　Javascript 在本機(jī)瀏覽器中對(duì)的表格數(shù)據(jù)進(jìn)行排序

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