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


Posted in Javascript onOctober 29, 2011

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

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

/** 
* @description 表格排序实现 
* @author Blog:http://www.cnblogs.com/know/ 
* @date 2011-10-28 
**/ 
(function () { 
//初始化配置对象 
var _initConfig = null; 
var _tableObj = null, _tbodyObj = null, _tBodyIndex = 0; 
//存放当前各排序方式下的(有序)行数组的对象——仅在IsLazyMode=true,此变量有用 
var _trJqObjArray_Obj = null; 
/** 
* 添加排序方式(规则)的方法 
* @private 
* @param trJqObjArr:(外部传入)存放排序行的数组,tdIndex:排序列的索引,td_valAttr:排序列的取值属性,td_dataType:排序列的值类型 
**/ 
function _GetOrderTdValueArray(trJqObjArr, tdIndex, td_valAttr, td_dataType) { 
var tdOrderValArr = new Array(); 
var trObj, tdObj, tdVal; 
_tbodyObj.find("tr").each(function (i, trItem) { 
trObj = $(trItem); 
trJqObjArr.push(trObj); 
tdObj = trObj.find("td")[tdIndex]; 
tdObj = $(tdObj); 
tdVal = td_valAttr ? tdObj.attr(td_valAttr) : tdObj.text(); 
tdVal = _GetValue(tdVal, td_dataType); 
tdOrderValArr.push(tdVal); 
}); 
return tdOrderValArr; 
} 
/** 
* 返回jQuery对象的方法 
* @private 
**/ 
function _GetJqObjById(id) { 
return "string" == typeof (id) ? $("#" + id) : $(id); 
}; 
/** 
* 排序方法 
* @private 
* @param tdIndex:排序列的索引,options:排序列的规则配置对象 
**/ 
function _Sort(tdIndex, options) { 
var trJqObjArr = null; 
if (_initConfig.IsLazyMode) { 
!_trJqObjArray_Obj && (_trJqObjArray_Obj = {}); 
trJqObjArr = _trJqObjArray_Obj[tdIndex]; 
} 
var isExist_trJqObjArr = true; 
if (!trJqObjArr) { 
isExist_trJqObjArr = false; 
trJqObjArr = new Array(); 
var tdOrderValArr = _GetOrderTdValueArray(trJqObjArr, tdIndex, options.ValAttr, options.DataType); 
var sort_len = tdOrderValArr.length - 1; 
var isExchanged = false, compareOper = options.Desc ? ">" : "<"; 
for (var i = 0; i < sort_len; i++) { 
isExchanged = false; 
for (var j = sort_len; j > i; j--) { 
if (eval(tdOrderValArr[j] + compareOper + tdOrderValArr[j - 1])) { 
_ExchangeArray(tdOrderValArr, j); 
//交换行对象在数组中的顺序 
_ExchangeArray(trJqObjArr, j); 
isExchanged = true; 
} 
} 
//一遍比较过后如果没有进行交换则退出循环 
if (!isExchanged) 
break; 
} 
_initConfig.IsLazyMode && (_trJqObjArray_Obj[tdIndex] = trJqObjArr); 
} 
if (trJqObjArr) { 
if (options.Toggle) { 
_initConfig.IsLazyMode && isExist_trJqObjArr && trJqObjArr.reverse(); 
options.Desc = !options.Desc; 
} 
_ShowTable(trJqObjArr); 
} 
} 
/** 
* 显示排序后的表格 
* @private 
* @param trJqObjArr:排序后的tr对象数组 
**/ 
function _ShowTable(trJqObjArr) { 
_tbodyObj.html(""); 
for (var n = 0, len = trJqObjArr.length; n < len; n++) { 
_tbodyObj.append(trJqObjArr[n]); 
$.isFunction(_initConfig.OnShow) && (_initConfig.OnShow(n, trJqObjArr[n], _tbodyObj)); 
} 
} 
/** 
* 交换数组中项的方法 
* @private 
* @param array:数组,j:交换数组项的尾项索引 
**/ 
function _ExchangeArray(array, j) { 
var temp = array[j]; 
array[j] = array[j - 1]; 
array[j - 1] = temp; 
} 
/** 
* 添加排序方式(规则)的方法 
* @private 
* @param tdVal:排序列的值,td_dataType:排序列的值类型 
**/ 
function _GetValue(tdVal, td_dataType) { 
switch (td_dataType) { 
case "int": 
return parseInt(tdVal) || 0; 
case "float": 
return parseFloat(tdVal) || 0; 
case "date": 
return Date.parse(tdVal) || 0; 
case "string": 
default: 
return tdVal.toString() || ""; 
} 
} 
/** 
* 添加排序方式(规则)的方法 
* @private 
* @param obj:排序触发(标签)的对象或id,index:要排序列所在的列索引,options:排序规则设置对象(如:DataType...) 
**/ 
function _SetOrder(obj, index, options) { 
var orderSettings = { 
ValAttr: false, //排序列的取值属性,默认为:innerText 
DataType: "string", //排序列的值类型(可取值:int|float|date|string) 
OnClick: null, //(点击)排序时触发的方法 
Desc: true, //(是否是降序)排序方式,默认为:降序 
Toggle: true, //切换排序方式 
DefaultOrder: false //是否是默认的排序方式 
}; 
$.extend(orderSettings, options); 
orderSettings.DataType = orderSettings.DataType.toLowerCase(); 
obj = _GetJqObjById(obj); 
//绑定触发排序的事件 
obj.bind("click", function () { 
_Sort(index, orderSettings); 
$.isFunction(orderSettings.OnClick) && orderSettings.OnClick(); 
}); 
orderSettings.DefaultOrder && _Sort(index, orderSettings); 
} 
var _api = { 
Init: function (obj, tBodyIndex, options) { 
if (obj == null || typeof (obj) == undefined) { 
alert("TableOrder初始化参数为空或有误!"); 
return; 
} 
_tableObj = _GetJqObjById(obj); 
_tBodyIndex = tBodyIndex || 0; 
_tbodyObj = _tableObj.find("tbody:eq(" + _tBodyIndex + ")"); 
options = options || {}; 
_initConfig = { 
IsLazyMode: true, //是否是懒惰模式,默认为:true 
OnShow: null //排序后表格显示时的方法,params:trIndex,trJqObj,tbodyObj 
}; 
$.extend(_initConfig, options); 
_trJqObjArray_Obj = null; 
}, 
SetOrder: function (obj, index, options) { 
if (_tableObj == null) { 
alert("_tableObj尚未初始化!"); 
return; 
} 
_SetOrder(obj, index, options); 
} 
}; 
window.TableOrderOper = _api; 
})();

其使用如下:
<table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable"> 
<thead> 
<tr> 
<td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td> 
<td width="150" align="center"><a href="javascript:void(0)" id="idAddtime" class="up">上传时间</a></td> 
<td width="50" align="center"><a href="javascript:void(0)" id="idSize">大小</a></td> 
</tr> 
</thead> 
<tbody> 
<tr class="hoverTr"> 
<td _ext="rar">JSCSS</td> 
<td align="center" _order="2008/9/12 8:51:09">2008/9/12 8:51:09</td> 
<td align="right" _order="433247">433247</td> 
</tr> 
<tr> 
<td _ext="htm">AJAX</td> 
<td align="center" _order="2008/3/6 20:12:23">2008/3/6 20:12:23</td> 
<td align="right" _order="11394">11394</td> 
</tr> 
<tr> 
<td _ext="htm">EXT</td> 
<td align="center" _order="2008/10/4 20:21:54">2008/10/4 20:21:54</td> 
<td align="right" _order="351">351</td> 
</tr> 
<tr> 
<td _ext="xml">Index</td> 
<td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td> 
<td align="right" _order="14074">14074</td> 
</tr> 
<tr> 
<td _ext="js">ORDER</td> 
<td align="center" _order="2008/10/4 20:24:11">2008/10/4 20:24:11</td> 
<td align="right" _order="2844">2844</td> 
</tr> 
</tbody> 
</table> 
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="TableOrder.js" type="text/javascript"></script> 
<script type="text/javascript"> 
TableOrderOper.Init("idTable", 0, { 
OnShow: function (i, trJqObj, _tbodyObj) { 
trJqObj.attr("class", ((i +1) %2==0?"hoverTr" : "")); 
} 
}); 
TableOrderOper.SetOrder("idAddtime", 1, { ValAttr: "_order", DataType: "date" }); 
TableOrderOper.SetOrder("idSize", 2, { DataType: "int", DefaultOrder: true, OnClick: function () { 
alert("idSize"); 
} }); 
</script>

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

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

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

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

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

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

OrderTable.rar

原文地址: cnblogs know

Javascript 相关文章推荐
htm调用JS代码
Mar 15 Javascript
javascript 写类方式之三
Jul 05 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
js实现导航吸顶效果
Feb 24 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 #Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 #Javascript
基于jquery的无限级联下拉框js插件
Oct 29 #Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 #Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 #Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 #Javascript
js常用代码段收集
Oct 28 #Javascript
You might like
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
PHP Socket 编程
2010/04/09 PHP
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Flask框架WTForm表单用法示例
2018/07/20 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python类中self参数用法详解
2020/02/13 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
通过Python实现一个简单的html页面
2020/05/16 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
英国日常交易网站:Wowcher
2018/09/04 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
大学生活动策划方案
2014/02/10 职场文书
小学运动会开幕词
2015/01/28 职场文书
羊脂球读书笔记
2015/06/30 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android