使用jQuery实现table表格排序js插件

在前不久做的一个web项目中，需要实现js表格排序的效果，当时为了省事，就在网上找了几个相关的js插件，像:jQuery的 table排序插件(感觉其使用比较麻烦或不清楚其具体用法，就没有使用)、原生态js的 table排序插件等，最后比较看了下——采用了一个原生态js的 table排序插件,并在其基础上做了些修改，虽有些勉强或有些地方使用不太舒服，但最算是比较好的实现了当时需要的功能。而前两天，对原有表格做了点儿修改——增加隔行换色的功能，问题就出现了，——效果错乱；检查分析了下，问题出在其 table排序插件代码上——其原代码写的比较难理解，修改还不如重新自己写一个 table排序插件。

说写就写，table排序其实很简单：就是取出所有排序列的值并存放在数组中(并且各列对应行对象也存放到一个数组中),然后对排序列的值数组排序(并对行对象数组排序)。下面贴出table排序插件代码：

  1 /**
  2 * @description     表格排序实现
  3 * @author          Blog:http://www.cnblogs.com/know/
  4 * @date            2011-10-28
  5 **/
  6 (function () {
  7     //初始化配置对象
  8     var _initConfig = null;
  9     var _tableObj = null, _tbodyObj = null, _tBodyIndex = 0;
 10     //存放当前各排序方式下的(有序)行数组的对象——仅在IsLazyMode=true，此变量有用
 11     var _trJqObjArray_Obj = null;
 12 
 13     /**
 14     * 添加排序方式(规则)的方法
 15     * @private
 16     * @param trJqObjArr：(外部传入)存放排序行的数组，tdIndex：排序列的索引，td_valAttr：排序列的取值属性，td_dataType：排序列的值类型
 17     **/
 18     function _GetOrderTdValueArray(trJqObjArr, tdIndex, td_valAttr, td_dataType) {
 19         var tdOrderValArr = new Array();
 20         var trObj, tdObj, tdVal;
 21         _tbodyObj.find("tr").each(function (i, trItem) {
 22             trObj = $(trItem);
 23             trJqObjArr.push(trObj);
 24 
 25             tdObj = trObj.find("td")[tdIndex];
 26             tdObj = $(tdObj);
 27             tdVal = td_valAttr ? tdObj.attr(td_valAttr) : tdObj.text();
 28             tdVal = _GetValue(tdVal, td_dataType);
 29             tdOrderValArr.push(tdVal);
 30         });
 31         return tdOrderValArr;
 32     }
 33 
 34     /**
 35     * 返回jQuery对象的方法
 36     * @private
 37     **/
 38     function _GetJqObjById(id) {
 39         return "string" == typeof (id) ? $("#" + id) : $(id);
 40     };
 41 
 42     /**
 43     * 排序方法
 44     * @private
 45     * @param tdIndex：排序列的索引,options：排序列的规则配置对象
 46     **/
 47     function _Sort(tdIndex, options) {
 48         var trJqObjArr = null;
 49         if (_initConfig.IsLazyMode) {
 50             !_trJqObjArray_Obj && (_trJqObjArray_Obj = {});
 51             trJqObjArr = _trJqObjArray_Obj[tdIndex];
 52         }
 53         var isExist_trJqObjArr = true;
 54         if (!trJqObjArr) {
 55             isExist_trJqObjArr = false;
 56             trJqObjArr = new Array();
 57             var tdOrderValArr = _GetOrderTdValueArray(trJqObjArr, tdIndex, options.ValAttr, options.DataType);
 58 
 59             var sort_len = tdOrderValArr.length - 1;
 60             var isExchanged = false, compareOper = options.Desc ? ">" : "<";
 61             for (var i = 0; i < sort_len; i++) {
 62                 isExchanged = false;
 63                 for (var j = sort_len; j > i; j--) {
 64                     if (eval(tdOrderValArr[j] + compareOper + tdOrderValArr[j - 1])) {
 65                         _ExchangeArray(tdOrderValArr, j);
 66                         //交换行对象在数组中的顺序
 67                         _ExchangeArray(trJqObjArr, j);
 68                         isExchanged = true;
 69                     }
 70                 }
 71                 //一遍比较过后如果没有进行交换则退出循环 
 72                 if (!isExchanged)
 73                     break;
 74             }
 75             _initConfig.IsLazyMode && (_trJqObjArray_Obj[tdIndex] = trJqObjArr);
 76         }
 77 
 78         if (trJqObjArr) {
 79             if (options.Toggle) {
 80                 _initConfig.IsLazyMode && isExist_trJqObjArr && trJqObjArr.reverse();
 81                 options.Desc = !options.Desc;
 82             }
 83             _ShowTable(trJqObjArr);
 84         }
 85     }
 86 
 87     /**
 88     * 显示排序后的表格
 89     * @private
 90     * @param trJqObjArr：排序后的tr对象数组
 91     **/
 92     function _ShowTable(trJqObjArr) {
 93         _tbodyObj.html("");
 94         for (var n = 0, len = trJqObjArr.length; n < len; n++) {
 95             _tbodyObj.append(trJqObjArr[n]);
 96             $.isFunction(_initConfig.OnShow) && (_initConfig.OnShow(n, trJqObjArr[n], _tbodyObj));
 97         }
 98     }
 99 
100     /**
101     * 交换数组中项的方法
102     * @private
103     * @param array：数组，j：交换数组项的尾项索引
104     **/
105     function _ExchangeArray(array, j) {
106         var temp = array[j];
107         array[j] = array[j - 1];
108         array[j - 1] = temp;
109     }
110 
111     /**
112     * 添加排序方式(规则)的方法
113     * @private
114     * @param tdVal：排序列的值，td_dataType：排序列的值类型
115     **/
116     function _GetValue(tdVal, td_dataType) {
117         switch (td_dataType) {
118             case "int":
119                 return parseInt(tdVal) || 0;
120             case "float":
121                 return parseFloat(tdVal) || 0;
122             case "date":
123                 return Date.parse(tdVal) || 0;
124             case "string":
125             default:
126                 return tdVal.toString() || "";
127         }
128     }
129 
130     /**
131     * 添加排序方式(规则)的方法
132     * @private
133     * @param obj：排序触发(标签)的对象或id，index：要排序列所在的列索引，options：排序规则设置对象(如:DataType...)
134     **/
135     function _SetOrder(obj, index, options) {
136         var orderSettings = {
137             ValAttr: false, //排序列的取值属性,默认为：innerText
138             DataType: "string", //排序列的值类型(可取值：int|float|date|string)
139             OnClick: null, //(点击)排序时触发的方法
140             Desc: true, //(是否是降序)排序方式，默认为：降序
141             Toggle: true, //切换排序方式
142             DefaultOrder: false //是否是默认的排序方式
143         };
144         $.extend(orderSettings, options);
145         orderSettings.DataType = orderSettings.DataType.toLowerCase();
146         obj = _GetJqObjById(obj);
147         //绑定触发排序的事件
148         obj.bind("click", function () {
149             _Sort(index, orderSettings);
150             $.isFunction(orderSettings.OnClick) && orderSettings.OnClick();
151         });
152         orderSettings.DefaultOrder && _Sort(index, orderSettings);
153     }
154 
155     var _api = {
156         Init: function (obj, tBodyIndex, options) {
157             if (obj == null || typeof (obj) == undefined) {
158                 alert("TableOrder初始化参数为空或有误！");
159                 return;
160             }
161             _tableObj = _GetJqObjById(obj);
162             _tBodyIndex = tBodyIndex || 0;
163             _tbodyObj = _tableObj.find("tbody:eq(" + _tBodyIndex + ")");
164             options = options || {};
165             _initConfig = {
166                 IsLazyMode: true, //是否是懒惰模式，默认为:true
167                 OnShow: null  //排序后表格显示时的方法,params:trIndex,trJqObj,tbodyObj
168             };
169             $.extend(_initConfig, options);
170             _trJqObjArray_Obj = null;
171         },
172         SetOrder: function (obj, index, options) {
173             if (_tableObj == null) {
174                 alert("_tableObj尚未初始化！");
175                 return;
176             }
177             _SetOrder(obj, index, options);
178         }
179     };
180     window.TableOrderOper = _api;
181 })();

其使用如下：

 1  <table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable">
 2     <thead>
 3     <tr>
 4     <td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td>
 5     <td width="150" align="center"><a href="javascript:void(0)" id="idAddtime" class="up">上传时间</a></td>
 6     <td width="50" align="center"><a href="javascript:void(0)" id="idSize">大小</a></td>
 7     </tr>
 8     </thead>
 9     <tbody>
10     <tr class="hoverTr">
11     <td _ext="rar">JSCSS</td>
12     <td align="center" _order="2008/9/12 8:51:09">2008/9/12 8:51:09</td>
13     <td align="right" _order="433247">433247</td>
14     </tr>
15     <tr>
16     <td _ext="htm">AJAX</td>
17     <td align="center" _order="2008/3/6 20:12:23">2008/3/6 20:12:23</td>
18     <td align="right" _order="11394">11394</td>
19     </tr>
20     <tr>
21     <td _ext="htm">EXT</td>
22     <td align="center" _order="2008/10/4 20:21:54">2008/10/4 20:21:54</td>
23     <td align="right" _order="351">351</td>
24     </tr>
25     <tr>
26     <td _ext="xml">Index</td>
27     <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
28     <td align="right" _order="14074">14074</td>
29     </tr>
30     <tr>
31     <td _ext="js">ORDER</td>
32     <td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td>
33     <td align="right" _order="2844">2844</td>
34     </tr>
35     </tbody>
36     </table>
37     <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
38     <script src="TableOrder.js" type="text/javascript"></script>
39     <script type="text/javascript">
40         TableOrderOper.Init("idTable", 0, {
41             OnShow: function (i, trJqObj, _tbodyObj) {
42                 trJqObj.attr("class", ((i +1) %2==0?"hoverTr" : ""));
43             }
44         });
45         TableOrderOper.SetOrder("idAddtime", 1, { ValAttr: "_order", DataType: "date" });
46         TableOrderOper.SetOrder("idSize", 2, { DataType: "int", DefaultOrder: true, OnClick: function () {
47             alert("idSize"); 
48         } });
49 </script>

代码中注释我都尽量写的比较清楚了，需要补充说明的是：

1.js使用的是闭包，我强调代码要尽可能的简洁易懂。

2.IsLazyMode属性设置，IsLazyMode=true,适用于当前要排序的表格是不变的，即不会有ajax的增删改行的操作，而且你看代码后就可以看出的一个好处：把要排序列的对应的行对象只一次遍历，并将排序后的行对象数组保存在全局对象中，下次排序时直接通过tdIndex(排序列的索引)取出对应的行对象数组,并将数组反转，即可实现排序的效果，可以在一定程度上提高代码执行效率(性能); IsLazyMode=false, 即适用于当前要排序的表格会改变，如有ajax的增删改行的操作的情况。

3.考虑一般要排序的表格数据量都不大，其中的数组排序使用的是冒泡排序算法。

4.OnShow: null //排序后表格显示时的方法,params:trIndex,trJqObj,tbodyObj ——可方便用于设置排序后的表格的换行样式等，也出于对性能优化方面的考虑。

好了，最后，附上插件js和demo，目前的实现只能说是能很好的满足我当前项目中的需求或适用于于大多数的场景，如果有没有考虑到或不好的地方，希望各位路过的朋友，能毫不客气的拍砖留言，大家互相交流学习！

Demo下载：files.cnblogs.com/know/OrderTable.rar