js 实现 table 行排序

三里屯摇滚

js 实现 table 行排序

闲时无聊,参考网上一些资料,写了一个 SortTableTool.js 实现table行排序.
关键代码如下:
Java代码

1. /** object  
   
2. *  example : sortTableT.sort('theTable',0,'int')  
   
3. *   
   
4. **/  
   
5. var sortTableT = new SortTableTool();   
   
6. /** function  
   
7. *  SortTableTool  
   
8. */  
   
9. function SortTableTool(){   
   
10.     /** is sort all tBodies */  
    
11.     this.isSortAlltBodies = false;   
    
12. };   
    
13. /** SortTableTool.sort  
    
14. *  tableId : table.id  
    
15. *  sortColumn : cell'index of row  
    
16. *  nodeType : cell data type  
    
17. */  
    
18. SortTableTool.prototype.sort = function(tableId, sortColumn ,nodeType) {   
    
19.     var table = document.getElementById(tableId);   
    
20.     var _tbody_length = this.isSortAlltBodies ? table.tBodies.length : 1;   
    
21.       
    
22.     var rowArray = new Array();   
    
23.     var rowIndex = 0;   
    
24.     for(var t=0 ; t< _tbody_length ; t++){   
    
25.         var tableBody = table.tBodies[t];   
    
26.         var tableRows = tableBody.rows;   
    
27.         for (var i = 0; i < tableRows.length; i++) {   
    
28.             rowArray[rowIndex++] = tableRows[i];   
    
29.         }   
    
30.     }   
    
31.     if (table.sortColumn == sortColumn) {   
    
32.         rowArray.reverse();   
    
33.     } else {   
    
34.         rowArray.sort(generateCompareTR(sortColumn, nodeType));   
    
35.     }     
    
36.     var tbodyFragment = document.createDocumentFragment();   
    
37.     for (var i = 0; i < rowArray.length; i++) {   
    
38.         tbodyFragment.appendChild(rowArray[i]);   
    
39.     }   
    
40.     tableBody.appendChild(tbodyFragment);   
    
41.     table.sortColumn = sortColumn;   
    
42. }   
    
43. var generateCompareTR = function(sortColumn, nodeType) {   
    
44.     return function compareTR(trLeft, trRight) {   
    
45.         var left_firstChild = trLeft.cells[sortColumn].firstChild;   
    
46.         var right_firstChild = trRight.cells[sortColumn].firstChild;   
    
47.         var leftValue = this.convertData(left_firstChild == null ? "" :left_firstChild.nodeValue, nodeType);   
    
48.         var rightValue = this.convertData(right_firstChild == null ? "" :right_firstChild.nodeValue, nodeType);   
    
49.         if (leftValue < rightValue) {   
    
50.             return -1;   
    
51.         }else if (leftValue > rightValue) {   
    
52.             return 1;   
    
53.         }else{   
    
54.             return 0;   
    
55.         }   
    
56.     };   
    
57. }   
    
58. var convertData = function(_value, dataType) {   
    
59.     var value = (_value == null ) ? "" :  _value;   
    
60.     var v_result = null;   
    
61.     switch (dataType) {   
    
62.       case "int":   
    
63.           v_result = parseInt(value.trim().replace(/,/g,''));   
    
64.           return isNaN(v_result) ? null : v_result ;   
    
65.       case "float":   
    
66.           v_result = parseFloat(value.trim().replace(/,/g,''));   
    
67.           return isNaN(v_result) ? null : v_result;   
    
68.       case "string":   
    
69.           return value.toString().ltrim();   
    
70.       case "date":   
    
71.           v_result = new Date(Date.parse(value.trim().replace(/-/g,'/')));   
    
72.           return isNaN(v_result) ? null : v_result;   
    
73.       default:   
    
74.           return value.toString();   
    
75.     }     
    
76. }   
    
77. /**  
    
78. * String.prototype.trim  
    
79. * @return  
    
80. */  
    
81. String.prototype.trim=function(){   
    
82.     return this.replace(/(^\s*)|(\s*$)/g, '');   
    
83. }   
    
84. String.prototype.ltrim=function(){   
    
85.     return this.replace(/(^\s*)/g,"");   
    
86. }   
    
87. String.prototype.rtrim=function(){   
    
88.     return this.replace(/(\s*$)/g,"");   
    
89. }   
    
90. //------------------ over --------------------------  
    
91. 
    
92. /** object
    
93. *  example : sortTableT.sort('theTable',0,'int')
    
94. *
    
95. **/
    
96. var sortTableT = new SortTableTool();
    
97. /** function
    
98. *  SortTableTool
    
99. */
    
100. function SortTableTool(){
     
101.         /** is sort all tBodies */
     
102.         this.isSortAlltBodies = false;
     
103. };
     
104. /** SortTableTool.sort
     
105. *  tableId : table.id
     
106. *  sortColumn : cell'index of row
     
107. *  nodeType : cell data type
     
108. */
     
109. SortTableTool.prototype.sort = function(tableId, sortColumn ,nodeType) {
     
110.     var table = document.getElementById(tableId);
     
111.     var _tbody_length = this.isSortAlltBodies ? table.tBodies.length : 1;
     
112.    
     
113.     var rowArray = new Array();
     
114.     var rowIndex = 0;
     
115.     for(var t=0 ; t< _tbody_length ; t++){
     
116.                 var tableBody = table.tBodies[t];
     
117.                 var tableRows = tableBody.rows;
     
118.                 for (var i = 0; i < tableRows.length; i++) {
     
119.                 rowArray[rowIndex++] = tableRows[i];
     
120.             }
     
121.         }
     
122.     if (table.sortColumn == sortColumn) {
     
123.         rowArray.reverse();
     
124.     } else {
     
125.         rowArray.sort(generateCompareTR(sortColumn, nodeType));
     
126.     }  
     
127.     var tbodyFragment = document.createDocumentFragment();
     
128.     for (var i = 0; i < rowArray.length; i++) {
     
129.         tbodyFragment.appendChild(rowArray[i]);
     
130.     }
     
131.     tableBody.appendChild(tbodyFragment);
     
132.     table.sortColumn = sortColumn;
     
133. }
     
134. var generateCompareTR = function(sortColumn, nodeType) {
     
135.     return function compareTR(trLeft, trRight) {
     
136.             var left_firstChild = trLeft.cells[sortColumn].firstChild;
     
137.             var right_firstChild = trRight.cells[sortColumn].firstChild;
     
138.         var leftValue = this.convertData(left_firstChild == null ? "" :left_firstChild.nodeValue, nodeType);
     
139.         var rightValue = this.convertData(right_firstChild == null ? "" :right_firstChild.nodeValue, nodeType);
     
140.         if (leftValue < rightValue) {
     
141.             return -1;
     
142.         }else if (leftValue > rightValue) {
     
143.                 return 1;
     
144.         }else{
     
145.                 return 0;
     
146.         }
     
147.     };
     
148. }
     
149. var convertData = function(_value, dataType) {
     
150.         var value = (_value == null ) ? "" :  _value;
     
151.         var v_result = null;
     
152.     switch (dataType) {
     
153.       case "int":
     
154.               v_result = parseInt(value.trim().replace(/,/g,''));
     
155.               return isNaN(v_result) ? null : v_result ;
     
156.       case "float":
     
157.               v_result = parseFloat(value.trim().replace(/,/g,''));
     
158.               return isNaN(v_result) ? null : v_result;
     
159.       case "string":
     
160.               return value.toString().ltrim();
     
161.       case "date":
     
162.               v_result = new Date(Date.parse(value.trim().replace(/-/g,'/')));
     
163.               return isNaN(v_result) ? null : v_result;
     
164.       default:
     
165.               return value.toString();
     
166.     }  
     
167. }
     
168. /**
     
169. * String.prototype.trim
     
170. * @return
     
171. */
     
172. String.prototype.trim=function(){
     
173.     return this.replace(/(^\s*)|(\s*$)/g, '');
     
174. }
     
175. String.prototype.ltrim=function(){
     
176.     return this.replace(/(^\s*)/g,"");
     
177. }
     
178. String.prototype.rtrim=function(){
     
179.     return this.replace(/(\s*$)/g,"");
     
180. }
     
181. //------------------ over --------------------------

复制代码

效果如下图:


测试多次,发现一个棘手的问题:
如果单元格中有 &nbsp; ,则 convertData 中无法去除 &nbsp;
各位大家,有什么好的方法和建议,可留言我.

冰释一片天

谢谢分享  希望于楼主多多交流