自己写的table表格排序js插件(高效简洁)

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 268 次

在前不久做的一个web项目中，需要实现js表格排序的效果，当时为了省事，就在网上找了几个相关的js插件，像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法，就没有使用)、原生

　　在前不久做的一个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 &amp;&amp; (_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 ? "&gt;" : "&lt;";   61             for (var i = 0; i &lt; sort_len; i++) {   62                 isExchanged = false;   63                 for (var j = sort_len; j &gt; 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 &amp;&amp; (_trJqObjArray_Obj[tdIndex] = trJqObjArr);   76         }   77    78         if (trJqObjArr) {   79             if (options.Toggle) {   80                 _initConfig.IsLazyMode &amp;&amp; isExist_trJqObjArr &amp;&amp; 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 &lt; len; n++) {   95             _tbodyObj.append(trJqObjArr[n]);   96             $.isFunction(_initConfig.OnShow) &amp;&amp; (_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) &amp;&amp; orderSettings.OnClick();  151         });  152         orderSettings.DefaultOrder &amp;&amp; _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  &lt;table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable"&gt;   2     &lt;thead&gt;   3     &lt;tr&gt;   4     &lt;td&gt; &lt;a href="javascript:void(0)" id="idTitle"&gt;名称&lt;/a&gt; / &lt;a href="javascript:void(0)" id="idExt"&gt;类型&lt;/a&gt;&lt;/td&gt;   5     &lt;td width="150" align="center"&gt;&lt;a href="javascript:void(0)" id="idAddtime" class="up"&gt;上传时间&lt;/a&gt;&lt;/td&gt;   6     &lt;td width="50" align="center"&gt;&lt;a href="javascript:void(0)" id="idSize"&gt;大小&lt;/a&gt;&lt;/td&gt;   7     &lt;/tr&gt;   8     &lt;/thead&gt;   9     &lt;tbody&gt;  10     &lt;tr class="hoverTr"&gt;  11     &lt;td _ext="rar"&gt;JSCSS&lt;/td&gt;  12     &lt;td align="center" _order="2008/9/12 8:51:09"&gt;2008/9/12 8:51:09&lt;/td&gt;  13     &lt;td align="right" _order="433247"&gt;433247&lt;/td&gt;  14     &lt;/tr&gt;  15     &lt;tr&gt;  16     &lt;td _ext="htm"&gt;AJAX&lt;/td&gt;  17     &lt;td align="center" _order="2008/3/6 20:12:23"&gt;2008/3/6 20:12:23&lt;/td&gt;  18     &lt;td align="right" _order="11394"&gt;11394&lt;/td&gt;  19     &lt;/tr&gt;  20     &lt;tr&gt;  21     &lt;td _ext="htm"&gt;EXT&lt;/td&gt;  22     &lt;td align="center" _order="2008/10/4 20:21:54"&gt;2008/10/4 20:21:54&lt;/td&gt;  23     &lt;td align="right" _order="351"&gt;351&lt;/td&gt;  24     &lt;/tr&gt;  25     &lt;tr&gt;  26     &lt;td _ext="xml"&gt;Index&lt;/td&gt;  27     &lt;td align="center" _order="2008/10/4 20:24:11"&gt;2008/10/4 20:24:11&lt;/td&gt;  28     &lt;td align="right" _order="14074"&gt;14074&lt;/td&gt;  29     &lt;/tr&gt;  30     &lt;tr&gt;  31     &lt;td _ext="js"&gt;ORDER&lt;/td&gt;  32     &lt;td align="center" _order="2008/10/4 20:24:11"&gt;2008/10/4 20:24:11&lt;/td&gt;  33     &lt;td align="right" _order="2844"&gt;2844&lt;/td&gt;  34     &lt;/tr&gt;  35     &lt;/tbody&gt;  36     &lt;/table&gt;  37     &lt;script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"&gt;&lt;/script&gt;  38     &lt;script src="TableOrder.js" type="text/javascript"&gt;&lt;/script&gt;  39     &lt;script type="text/javascript"&gt;  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 &lt;/script&gt;

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

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

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

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

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

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。