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" >
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>