Javascript之Grid高性能排序

      好久没上博客园写文章了,最近看了些关于高性能JS开发的书籍,对于Grid排序这块自我感觉理解的还算不错,可以拿上来让JS高手们指导下!也可以让JS的新手们了解下!在代码上有何不妥之处欢迎大家拍砖!感激不尽!

      在这里我主要是封装了Grid排序的实体功能,为了让在各种项目版本中都可以直接使用!以下为JS详细代码以及注释!

  1 /*
  2     * @数据表格排序
  3     * @CodeBy:MrCo
  4     * @Date:2013/3/15
  5     * @Mail:co.mr.co@gmail.com
  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>

Demo下载地址:https://files.cnblogs.com/keke/GridSort.rar

 

posted @ 2013-03-15 15:49  MR CO  阅读(4312)  评论(4编辑  收藏  举报