软件开发培训班 >> 编程开发 >> JavaScript

JavaScript Table排序 2.0 (更新)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Table 排序</title> 
<style type="text/css"> 
.odTable { 
width:500px; 
border:1px solid #ebebeb; 
line-height:20px; 
font-size:12px; 
background:#FFF; 
} 
.odTable thead td { 
background-color:#ebebeb; 
} 
.odTable a { 
outline:none;/*ff*/ 
hide-focus:expression(this.hideFocus=true);/*ie*/ 
} 
.odTable a:link, .odTable a:visited, .odTable a:hover, .odTable a:active { 
text-decoration:none; 
color:#333; 
padding-right:15px; 
} 
.odTable a.up, .odTable a.down { 
background:url([img]/upload/20090507150209227.jpg[/img]) right center no-repeat; 
} 
.odTable a.down { 
background-image:url([img]/upload/20090507150209265.jpg[/img]); 
} 
</style> 
<script type="text/javascript"> 
var isIE = (document.all) ? true : false;

var isIE6 = isIE && (navigator.userAgent.indexOf(MSIE 6.0) != -1);

var isIE7 = isIE && (navigator.userAgent.indexOf(MSIE 7.0) != -1);

var isIE6or7 = isIE6 || isIE7;

var $ = function (id) { 
return "string" == typeof id ? document.getElementById(id) : id; 
};

var Extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property]; 
} 
return destination; 
}

var Bind = function(object, fun) { 
var args = Array.prototype.slice.call(arguments).slice(2); 
return function() { 
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); 
} 
}

var TableOrder = function(table, options) { 
this._checked = [];//checkbox和radio集合（用来解决ie6/7的状态恢复bug）

this.tBody = $(table).tBodies[0];//tbody对象 
this.Rows = Map(this.tBody.rows, function(o){ return o; });//行集合

this.SetOptions(options); 
} 
TableOrder.prototype = { 
//设置默认属性 
SetOptions: function(options) { 
this.options = {//默认值 
Index:0,//td索引 
Attri:"innerHTML",//获取数据的属性 
DataType:"string",//比较的数据类型 
Desc:true,//是否按降序 
Compare:null,//自定义排序函数 
GetValue:null,//自定义取值函数 
startSort:function(){},//排序前执行 
endSort:function(){}//排序后执行 
}; 
Extend(this.options, options || {}); 
}, 
//排序并显示 
Sort: function() { 
var orders = Array.prototype.slice.call(arguments); 
//没有排序对象返回 
if(!orders.length){ return false }; 
//执行附加函数 
orders[0].startSort(); 
//排序 
this.Rows.sort(Bind(this, this.Compare, orders, 0)); 
//获取集合 
isIE6or7 && this.GetChecked(); 
//显示表格 
var oFragment = document.createDocumentFragment(); 
forEach(this.Rows, function(o){ oFragment.appendChild(o); }); 
this.tBody.appendChild(oFragment); 
//恢复状态 
isIE6or7 && this.SetChecked(); 
//执行附加函数 
orders[0].endSort(); 
}, 
//比较函数 
Compare: function(orders, i, o1, o2) { 
var order = orders[i], value1 = this.GetValue(order, o1), value2 = this.GetValue(order, o2) 
,result = order.Compare ? order.Compare(value1, value2) ://使用自定义排序函数 
typeof value2 == "string" ? value1.localeCompare(value2) : (value1 - value2); 
//如果result是0(值相同)同时有下一个排序对象的话继续比较否则根据Desc修正结果并返回 
return !result && orders[++i] ? this.Compare(orders, i, o1, o2) : (order.Desc ? -1 : 1) * result; 
}, 
//获取比较值 
GetValue: function(order, tr) { 
var td = tr.cells[order.Index], att = order.Attri 
,data = order.GetValue ? order.GetValue(td) ://使用自定义取值函数 
att in td ? td[att] : td.getAttribute(att); 
//数据转换 
switch (order.DataType.toLowerCase()) { 
case "int": 
return parseInt(data, 10) || 0; 
case "float": 
return parseFloat(data, 10) || 0; 
case "date": 
return Date.parse(data) || 0; 
case "bool": 
return data === true || String(data).toLowerCase() == "true" ? 1 : 0; 
case "string": 
default: 
return data.toString() || ""; 
} 
}, 
//创建并返回一个排序对象 
Creat: function(options) { 
return Extend(Extend({}, this.options), options || {}); 
}, 
//获取要修正的checkbox和radio集合 
GetChecked: function() { 
this._checked = Filter(this.tBody.getElementsByTagName("input"), function(o){ 
return ((isIE6 && o.type == "checkbox") || o.type == "radio") && o.checked != o.defaultChecked; 
}); 
}, 
//设置checkbox和radio集合的checked 
SetChecked: function() { 
forEach(this._checked, function(o){ o.checked = !o.defaultChecked; }); 
} 
} 
</script> 
</head> 
<body> 
<table border="0" cellspacing="0" cellpadding="5" class="odTable" id="idTable"> 
<thead> 
<tr> 
<td align="center">ID</td> 
<td> 名称 / 类型</td> 
<td width="100" align="center">上传时间</td> 
<td width="50" align="center">大小</td> 
<td width="30" align="center">Ｃ</td> 
<td width="30" align="center">Ｒ</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td align="center">1</td> 
<td _ext="htm">new.htm</td> 
<td align="center">2008/9/12</td> 
<td align="right" _order="9">423.09 K</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">2</td> 
<td _ext="js">Scroller.js</td> 
<td align="center">2008/9/23</td> 
<td align="right" _order="80">2.5 K</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">3</td> 
<td _ext="js">AlertBox.js</td> 
<td align="center">2008/9/23</td> 
<td align="right" _order="290">3.48 K</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">4</td> 
<td _ext="xml">1.xml</td> 
<td align="center">2008/10/4</td> 
<td align="right" _order="19">11.13 K</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">5</td> 
<td _ext="xml">4.xml</td> 
<td align="center">2008/10/4</td> 
<td align="right" _order="1000">351 b</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">6</td> 
<td _ext="htm">news.htm</td> 
<td align="center">2008/10/4</td> 
<td align="right" _order="14074">13.74 K</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">7</td> 
<td _ext="js">function.js</td> 
<td align="center">2008/10/4</td> 
<td align="right" _order="2844">2.78 K</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">8</td> 
<td _ext="mp3">神秘园 - Nocturne.mp3</td> 
<td align="center">2008/9/20</td> 
<td align="right" _order="3111293">2.97 M</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">9</td> 
<td _ext="doc">详细功略+剧情流程（一）.doc</td> 
<td align="center">2009/2/2</td> 
<td align="right" _order="63488">62 K</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">10</td> 
<td _ext="doc">详细功略+剧情流程（二）.doc</td> 
<td align="center">2009/2/2</td> 
<td align="right" _order="164352">160.5 K</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">11</td> 
<td _ext="txt">禁止文件预览功能.txt</td> 
<td align="center">2008/8/7</td> 
<td align="right" _order="860">860 b</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
<tr> 
<td align="center">12</td> 
<td _ext="txt">超级无敌精彩的效果集合.txt</td> 
<td align="center">2009/2/2</td> 
<td align="right" _order="351">351 b</td> 
<td align="center"><input type="checkbox"/></td> 
<td align="center"><input name="c" type="radio"/></td> 
</tr> 
</tbody> 
</table>

有中文的先排前面，再按时间倒序，ID倒序排序： 
<input name="" type="button" value="Sort" id="idBtn" /> 
<script type="text/javascript"> 
var to = new TableOrder("idTable"), odID = to.Creat({ DataType: "int", Desc: false }), arrOrder = [];

function ClearCss(){ forEach(arrOrder, function(o){ o.className = ""; }); }

SetOrder("idNum", { DataType: "int" }); 
SetOrder("idTitle", { Index: 1 }); 
SetOrder("idExt", { Index: 1, Attri: "_ext" }); 
SetOrder("idAddtime", { Index: 2, DataType: "date" }); 
SetOrder("idSize", { Index: 3, Attri: "_order", DataType: "int" });

function GetCheck(o){ 
return o.getElementsByTagName("input")[0].checked; 
}

SetOrder("idCheckbox", { Index: 4, DataType: "bool", GetValue: GetCheck }); 
SetOrder("idRadio", { Index: 5, DataType: "bool", GetValue: GetCheck });

$("idNum").onclick();

//////////////////////////////////////////////////////////////////////

$("idBtn").onclick = function(){ to.Sort(od1, od2, od3); } 
</script> 
</body> 
</html>

技术文章快速查找

ListBox实现上移,下移,左移,右移的简单实例

节点的插入之append()和appendTo()的用法介绍

javascript 弹出层组件（升级版）

漂亮的Slider效果类终于封装成功

JavaScript中Break和Continue

YUI模块开发原理详解

javascript学习笔记(十四) window对象使用介绍

通过复制Table生成word和excel的javascript代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建