javascript 实现表格排序(二)

本篇作为上一篇的续篇http://blog.csdn.net/sunyujia/archive/2008/02/24/2116785.aspx 

好久不学习了,最近有点懒惰,时不时应该激励下自己.

以前写过一个表格排序的类,不是很好,排序方法是超简单的冒泡排序,性能差的没的说,为了支持汉字按拼音排序,使用了秋水无痕的字库,速度也是慢的夸张,由于都是在表上通过swapNode交互rows,再度影响性能,这次进行了重写,主要是做了性能优化.这一次没有自己写排序算法,汉字比较使用了本地方法localeCompare.为了加快速度使用了document.createDocumentFragment()这个东西确实很有效,但是毕竟还是基于对象的操作,所以速度再快也不会快到哪去.不如拼接字符串快. 

好久没写东西了,顺便试试csdn的新版编辑器,这次的编辑器看上去比以前好的多了.

我把该说的东西都写在注释上面了,所以直接发代码了.

1.         /*
2.         *转载请注明出处:http://blog.csdn.net/sunyujia/
3.         *sunyujia@yahoo.cn
4.         */
5.         var syj={};//定义空对象,此对象用于模拟命名空间,相当于模拟java中的包路径
6.         syj.TableSorter=function(tb,iStart,iEnd){//定义表格排序函数,此函数用于模拟表格排序类
7.             this.oTable=document.getElementById(tb);//一个排序类对象仅对应一个表
8.             this.iStart=iStart==null?1:iStart;//表头不需要排序的前n行
9.             this.iEnd=iEnd==null?0:iEnd;//表尾不需要排序的后n行
10.             this.orderMap={};//存放每列排序状态的Map容器
11.             this.compareFuncMap={};//存放每列排序函数的Map容器
12.         }
13.         syj.TableSorter.prototype.sort=function(triger,type){//定义表格排序类的排序方法
14.             var oTbody=this.oTable.tBodies[0];
15.             var oRows=this.oTable.rows;//全部的rows(行)对象
16.             var aRowsList=[];//存放待排序的rows
17.             var aEndRowsList=[];//存放表尾不需要排序的rows
18.             var iLength=oRows.length;//表总行数
19.             if(this.iStart+this.iEnd>=iLength) return ;//表中无数据
20.             var oDocFrag=document.createDocumentFragment();//创建一个临时用的dom对象
21.             for(var i =this.iStart;i<iLength-this.iEnd;i++)//向数组中添加待排序的row对象
22.                 aRowsList.push(oRows[i]);
23.             aRowsList.sort(this.generateCompareFunc(triger,type));//利用数组的sort方法对数组进行排序
24.             for(var i =iLength-this.iEnd;i<iLength;i++)//添加表尾不参与排序的row对象
25.                 aEndRowsList.push(oRows[i]);
26.             if(this.orderMap[triger.cellIndex]=='asc'){
27.                 for(var i=aRowsList.length-1;i>=0;i=i-1)//反向append
28.                     oDocFrag.appendChild(aRowsList[i]);
29.             }else{
30.                 for(var i=0,iRowLength=aRowsList.length;i<iRowLength;i++)//正向append
31.                     oDocFrag.appendChild(aRowsList[i]);
32.             }
33.             for(var i=0,iRowLength=aEndRowsList.length;i<iRowLength;i++)//追加表尾没参与排序的rows
34.                 oDocFrag.appendChild(aEndRowsList[i]);
35.             oTbody.appendChild(oDocFrag);//把临时dom对象(其中存放了排序后的rows)挂到表上
36.             this.switchOrder(triger.cellIndex);//改变当前列的排序状态标识
37.             oTbody=null,oRows=null,aRowsList=null,aEndRowsList=null,iLength=null,oDocFrag=null;
38.         }
39.         syj.TableSorter.prototype.switchOrder=function(idx){
40.             var order=this.orderMap[idx];
41.             order=(order==null||order=='desc')?'asc':'desc';
42.             this.orderMap[idx]=order;
43.         }
44.         syj.TableSorter.prototype.toDate=function(ds){//字符串转成日期类型 格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd
45.             var d = new Date(Date.parse(ds));
46.             if (isNaN(d)){
47.                 var arys= ds.split('-');
48.                 d = new Date(arys[0],arys[1]-1,arys[2]);
49.             }
50.             return d;
51.         }
52.         syj.TableSorter.prototype.getCellValue=function(cell,func){//取cell的值,
53.             return func==null?cell.innerText:func(cell);//默认取td中的文字,如果指定了onsort则执行onsort中的函数取值
54.         }
55.         syj.TableSorter.prototype.generateCompareFunc=function(triger,type){//生存排序函数
56.             var idx=triger.cellIndex;//列的下标
57.             var func=this.compareFuncMap[idx];//先在map中找,找不到再新建
58.             if(func!=null) return func;
59.             var instance=this;//闭包引用层次太深了,需要此引用
60.             var onsortFunc=window[triger.onsort];//利用反射取得onsort定义的函数
61.             if(type=="STRING"){
62.                 func=function compare(a,b){
63.                     var x=instance.getCellValue(a.cells[idx],onsortFunc);
64.                     var y=instance.getCellValue(b.cells[idx],onsortFunc);
65.                     x=x==null?'':x;
66.                     y=y==null?'':y;
67.                     return x.localeCompare(y);//调用本地的比较函数,汉字按首字拼音排序
68.                 }
69.             }else if(type=="NUMBER"){
70.                 func=function compare(a,b){
71.                     var x=instance.getCellValue(a.cells[idx],onsortFunc);
72.                     var y=instance.getCellValue(b.cells[idx],onsortFunc);
73.                     x=x==null?0:x;
74.                     y=y==null?0:y;
75.                     x=x.replace(/[^/d|.|-]/g,"");//去掉除-.以外的其他字符
76.                     y=y.replace(/[^/d|.|-]/g,"");
77.                     return x*1-y*1;
78.                 }
79.             }else if(type=="DATE"){
80.                 func=function compare(a,b){
81.                     var x=instance.getCellValue(a.cells[idx],onsortFunc);
82.                     var y=instance.getCellValue(b.cells[idx],onsortFunc);
83.                     var d='1900-01-01';
84.                     var x=instance.toDate(x==''?d:x);
85.                     var y=instance.toDate(y==''?d:y);
86.                     var z=x-y;
87.                     return z;
88.                 }
89.             }
90.             this.compareFuncMap[idx]=func;
91.             return func;
92.         }

1. <html><head>
2.     <title></title>
3.     <script type="text/javascript" src="tableSort.js"></script>
4.     <script language=javascript>
5.         /*
6.         *转载请注明出处:http://blog.csdn.net/sunyujia/
7.         *author:孙钰佳
8.         *mail:sunyujia@yahoo.cn
9.         */
10.         function init(){
11.             //针对mainTable表创建排序对象sorter
12.             window.sorter=new syj.TableSorter('mainTable',2,1);
13.         }
14.         function getValue(cell){//自定义取值(用于比较大小的值)函数,用onsort指定
15.             return cell.childNodes[0].value;
16.         }
17.     </script>
18. </head>
19. <body onload="init();">
20. <table id='mainTable' border="1" style="border-collapse: collapse;" cellpadding="3">
21.     <tr>
22.         <td colspan="4">点击表头进行排序 http://blog.csdn.net/sunyujia/</td>
23.     </tr>
24.     <tr>
25.         <th onclick="sorter.sort(this,'NUMBER')" style="cursor: hand;">数字包括金额</th>
26.         <th onclick="sorter.sort(this,'STRING')" style="cursor: hand;">英文按首字母排序</th>
27.         <th onclick="sorter.sort(this,'STRING')" style="cursor: hand;" onsort="getValue" >支持取input的值</th>
28.         <th onclick="sorter.sort(this,'DATE')" style="cursor: hand;">支持多种日期格式</th>
29.     </tr>
30.     <tr>
31.         <td align="right">100</td>
32.         <td>liuguang</td>
33.         <td><input value="刘广"></td>
34.         <td>07-31-1997</td>
35.     </tr>
36.     <tr>
37.         <td align="right">0.99</td>
38.         <td>wangpeng</td>
39.         <td><input value="王鹏"></td>
40.         <td>2008-08-31</td>
41.     </tr>
42.     <tr>
43.         <td align="right">3,313.32</td>
44.         <td>sunyong</td>
45.         <td><input value="孙浩"></td>
46.         <td>12-31-2006</td>
47.     </tr>
48.     <tr>
49.         <td align="right">990000</td>
50.         <td>eclipse</td>
51.         <td><input value="按拼音排序"></td>
52.         <td>2006/06/30</td>
53.     </tr>
54.     <tr><td colspan="4">不参与排序的行,自定义前后不参与排序的行数</td></tr>
55. </table>
56. </body>
57. </html>

最后来张图,因为比较懒惰,所以没用调整样式比较粗糙,呵呵.