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