Javascript 의 Grid 고성능 정렬

오 랜 만 에 블 로그 원 에 글 을 쓰 게 되 었 습 니 다. 최근 에 고성능 JS 개발 에 관 한 책 을 읽 었 습 니 다. Grid 정렬 이라는 자기 느낌 에 대해 잘 이해 하고 있 습 니 다. JS 고수 들 에 게 지 도 를 받 을 수 있 습 니 다!JS 초보 자 들 도 알 수 있 게!코드 에 부적 절 한 점 이 있 으 면 벽돌 을 찍 는 것 을 환영 합 니 다!감격 해 마지 않다.
      여기 서 저 는 주로 Grid 정렬 의 실체 기능 을 봉 인 했 습 니 다. 각종 프로젝트 버 전에 서 직접 사용 할 수 있 도록!다음은 JS 상세 코드 및 주석!

  1 /*
  2     * @      
  3     * @CodeBy:MrCo
  4     * @Date:2013/3/15
  5     * @Mail:[email protected]
  6     */
  7 (function (w) {
  8 
  9     /*
 10         * @   window         gridSort  
 11     */
 12     if (w.gridSort) {
 13         return new Error('      gridSort ');
 14     }
 15 
 16     /*
 17         * @         
 18         * @GID string        table  ID，   ID             
 19     */
 20     var GridSort = function (GID) {                
 21         this.Grid = document.getElementById(GID);
 22         this.Gbody = this.Grid.tBodies[0];
 23         this.Ghead = this.Grid.tHead;
 24     }
 25 
 26     /*
 27         * @       
 28         * @    Grid               ，      
 29         * @val string               
 30         * @valType string           ，    int、float、date,    string 
 31     */
 32     GridSort._StringByConvert = function (val, valType) {
 33         if (!valType) return val.toString();
 34         switch (valType.toLowerCase()) {
 35             case 'int':
 36                 return parseInt(val);
 37             case 'float':
 38                 return parseFloat(val);
 39             case 'date':
 40                 return new Date(Date.parse(val));
 41             default:
 42                 return val.toString();
 43         }
 44     }
 45 
 46     /*
 47         * @Grid         
 48         * @colIdx int     （table） td    
 49         * @colType string    （table） td    
 50     */
 51     GridSort.prototype._Sequence = function (colIdx, colType) {
 52         //    JS                     
 53         //            ，  return   _Sequence()       
 54         //             Array Sort（）     
 55         //           arguments
 56         //           A B，                   
 57         // ：
 58         //  a    b，         a       b   ，        0   。
 59         //  a    b，    0。
 60         //  a    b，        0   。
 61         return (function(){
 62             var _rowPrevVal = GridSort._StringByConvert(arguments[0].cells[colIdx].firstChild.nodeValue, colType),  //     A  
 63                 _rowAfterVal = GridSort._StringByConvert(arguments[1].cells[colIdx].firstChild.nodeValue, colType); //     B  
 64                 if (_rowPrevVal < _rowAfterVal)
 65                     return -1;
 66                 else if (_rowPrevVal > _rowAfterVal)
 67                     return 1;
 68                 else
 69                     return 0;                                
 70         });
 71     }
 72 
 73     /*
 74         * @Grid           
 75         * @             ，   Table       ，         
 76         * @            DOM         
 77     */
 78     GridSort.prototype.BindClickHeadSort = function () {                
 79         var _rowsHead = this.Ghead.rows[0].cells,
 80             _gbody = this.Gbody,
 81             _gridRows = _gbody.rows,
 82             _girdSort = this._Sequence;
 83                 
 84         //   Grid      Click     ，      dom   onclick   
 85         for (var i = 0, count = _rowsHead.length; i < count; i++) {
 86 
 87             //    ，                  
 88             (function (idx) {                        
 89                 _rowsHead[idx].onclick = function () {
 90                     var _sortRows = [],                             
 91                         _sortType = this.getAttribute('stype'),
 92                         _orderby = _gbody.getAttribute('orderby');
 93 
 94                     //   Grid  Row Copy       ，      
 95                     for (var i = 0, count = _gridRows.length; i < count; i++) {
 96                         _sortRows[i] = _gridRows[i];
 97                     }
 98 
 99                     //   _orderby          ，           
100                     if (!_orderby) {
101                         //    Array Sort()  ，             Sort()         
102                         //   Sort()       ，     _Sequence()        ，      
103                         _sortRows.sort(_girdSort(idx, _sortType));
104                         _gbody.setAttribute('orderby', 'asc');
105                     } else {
106                         _sortRows.reverse();
107                         _gbody.removeAttribute('orderby');
108                     }
109                             
110                     //        ，           Rows          
111                     //          ，           ，         
112                     var _newRows = document.createDocumentFragment();                            
113                     for (var j = 0, count2 = _sortRows.length; j < count2; j++) {
114                         _newRows.appendChild(_sortRows[j]);
115                     }
116 
117                     //          Grid   
118                     _gbody.appendChild(_newRows);                            
119                 }
120             })(i);
121         }                                    
122     }
123             
124     /*
125         *      GridSort      window gridSort
126         *            ，         widnow.gridSort()   GridSort  
127         *        GridSort      
128     */
129     w.gridSort = (function (gid) { new GridSort(gid).BindClickHeadSort(); });
130 })(window);

 1 <table width="400" id="tab">
 2         <thead>
 3             <tr>
 4                 <th width="100">First Name</th>
 5                 <th width="100">Last Name</th>
 6                 <th width="100" stype="date">Date</th>
 7                 <th width="100" stype="int">Int</th>
 8             </tr>
 9         </thead>
10         <tbody>
11             <tr>
12                 <td>Kingwell</td>
13                 <td>Leng</td>
14                 <td>3/10/2012</td>
15                 <td>1</td>
16             </tr>
17             <tr>
18                 <td>1aJim</td>
19                 <td>Green</td>
20                 <td>3/5/2012</td>
21                 <td>2</td>
22             </tr>
23             <tr>
24                 <td>Kate</td>
25                 <td>Bin</td>
26                 <td>1/2/2012</td>
27                 <td>3</td>
28             </tr>
29             <tr>
30                 <td>Zte</td>
31                 <td>Ri</td>
32                 <td>5/3/2012</td>
33                 <td>33</td>
34             </tr>
35             <tr>
36                 <td>Bee</td>
37                 <td>Dd</td>
38                 <td>8/1/2012</td>
39                 <td>15</td>
40             </tr>
41         </tbody>
42     </table>
43     <script type="text/javascript">
44         gridSort('tab');
45     </script>

데모 다운로드 주소: http://files.cnblogs.com/keke/GridSort.rar