js操作table排序
tableSort.js/**
* js操作table排序类
* --------------------------------
* 页面调用 SetOrder(tbody, obj, index, options)
* @tbody : table.tbody
* @obj : td.head.a
* @index : td.cellIndex 默认-1自动获取cellIndex, 如果列中存在隐藏列需指定cellIndex
* @option: 参数
* demo:
* SetOrder("idList", "idTitle", -1);
* SetOrder("idList", "idExt", -1, { Attribute: "_ext" });
* SetOrder("idList", "idAddtime", -1, { Attribute: "_order", DataType: "date" });
* SetOrder("idList", "idSize", -1, { Attribute: "_order", DataType: "int" });
* --------------------------------
*/
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) {
fun(list[i], i);
}
};
/////////////////////////////////////
////////////////////////////////
var TableOrder = Class.create();
TableOrder.prototype = {
initialize: function(tbody) {
var oThis = this;
this.Body = $(tbody);//tbody对象
this.Rows = [];//行集合
Each(this.Body.rows, function(o){ oThis.Rows.push(o); })
},
//排序并显示
Sort: function(order) {
//排序
this.Rows.sort(this.Compare(order));
//alert(order.Down + '\n' +this.Rows[0].innerHTML);
order.Down && this.Rows.reverse();
//显示表格
var oFragment = document.createDocumentFragment();
Each(this.Rows, function(o){ oFragment.appendChild(o); });
this.Body.appendChild(oFragment);
},
//比较函数
Compare: function(order) {
var oThis = this;
return function(o1, o2) {
var value1 = oThis.GetValue(o1, order), value2 = oThis.GetValue(o2, order);
return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
};
},
//获取比较值
GetValue: function(tr, order) {
var data = tr.getElementsByTagName("td")[order.Index].getAttribute(order.Attribute);
//数据转换
switch (order.DataType.toLowerCase()) {
case "int":
return parseInt(data) || 0;
case "float":
return parseFloat(data) || 0;
case "date":
return Date.parse(data) || 0;
case "string":
default:
return data.toString() || "";
}
},
//添加并返回一个排序对象
Add: function(index, options) {
var oThis = this;
return new function(){
//默认属性
this.Attribute = "innerHTML";//获取数据的属性
this.DataType = "string";//数据类型
this.Down = false;//是否按顺序
Object.extend(this, options || {});
//排序对象的属性
this.Index = index;
this.Sort = function(){ oThis.Sort(this); };
};
}
}
var to = null;// = new TableOrder("idList");
function SetOrder(tbody, obj, index, options){
if(to == null) {
to = new TableOrder(tbody);
}
var o = $(obj);
//alert(o.parentElement.cellIndex + ' -- ' + index);
if(isNaN(parseInt(index)) || parseInt(index)<0) {
index = o.parentElement.cellIndex;
} else {
index = parseInt(index);
}
//添加一个排序对象
var order = to.Add(index, options);
o.onclick = function(){
//取相反排序
order.Down = !order.Down;
//设置样式
Each(SetOrder._arr, function(o){ o.className = ""; })
o.className = order.Down ? "down" : "up";
//排序显示
order.Sort();
return false;
}
//_arr是记录排序项目（这里主要用来设置样式）
SetOrder._arr ? SetOrder._arr.push(o) : SetOrder._arr = [];
}
System.css.main_table a{outline:none; hide-focus:expression(this.hideFocus=true); text-decoration:none; color:#124F98; }
.main_table thead a{padding-right:15px;}
.main_table thead a.up{ background:url(../images/up.gif) right center no-repeat; }
.main_table thead a.down{background:url(../images/down.gif) right center no-repeat;}
<!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>
<link type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/systemGYL.css">
</head>
<body id="main_content">
<div id="exp.messages">
</div>
<form name="form1" method="post" action="">
<input type="hidden" name="apply" value="1">
<input type="hidden" name="q_type" value="1">
<table class="common_table">
<tr>
<td class="head">
<span id="nav">js table排序示例</span> <span id="help" onclick="return showHelp('');">
</span>
</td>
</tr>
</table>
<table class="main_table">
<thead>
<tr>
<td class="head"><a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td>
<td class="head"><a href="javascript:void(0)" id="idAddtime" class="up">上传时间</a></td>
<td class="head"><a href="javascript:void(0)" id="idSize">大小</a></td>
</tr>
</thead>
<tbody id="idList">
<tr>
<td _ext="rar">new.rar</td>
<td align="center" _order="2008/9/12 8:51:09">2008-9-12 8:51:09</td>
<td align="right" _order="433247">423.09 K</td>
</tr>
<tr>
<td _ext="js">TagControl.js</td>
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
<td align="right" _order="1387">1.35 K</td>
</tr>
<tr>
<td _ext="js">Scroller.js</td>
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
<td align="right" _order="2556">2.5 K</td>
</tr>
<tr>
<td _ext="js">AlertBox.js</td>
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
<td align="right" _order="3565">3.48 K</td>
</tr>
<tr>
<td _ext="htm">1.htm</td>
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td>
<td align="right" _order="11394">11.13 K</td>
</tr>
<tr>
<td _ext="htm">4.htm</td>
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td>
<td align="right" _order="351">351 b</td>
</tr>
<tr>
<td _ext="xml">news.xml</td>
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
<td align="right" _order="14074">13.74 K</td>
</tr>
<tr>
<td _ext="xsl">news.xsl</td>
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
<td align="right" _order="16796">16.4 K</td>
</tr>
<tr>
<td _ext="js">function.js</td>
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
<td align="right" _order="2844">2.78 K</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="tableSort.js"></script>
<script type="text/javascript">
SetOrder("idList", "idTitle", -1);
SetOrder("idList", "idExt", -1, { Attribute: "_ext" });
SetOrder("idList", "idAddtime", -1, { Attribute: "_order", DataType: "date" });
SetOrder("idList", "idSize", -1, { Attribute: "_order", DataType: "int" });
</script>
<table class="common_table_querytool">
<tr>
<td>
</td>
<td align="right">
</td>
</tr>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>table排序示例</title>
<link type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/systemGYL.css">
</head>
<body id="main_content">
<div id="exp.messages">
</div>
<form name="form1" method="post" action="">
<input type="hidden" name="apply" value="1">
<input type="hidden" name="q_type" value="1">
<table class="common_table">
<tr>
<td class="head">
<span id="nav">js table排序示例</span> <span id="help" onclick="return showHelp('');">
</span>
</td>
</tr>
</table>
<table class="main_table">
<thead>
<tr>
<td class="head"><a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td>
<td class="head"><a href="javascript:void(0)" id="idAddtime" class="up">上传时间</a></td>
<td class="head"><a href="javascript:void(0)" id="idSize">大小</a></td>
</tr>
</thead>
<tbody id="idList">
<tr>
<td _ext="rar">new.rar</td>
<td align="center" _order="2008/9/12 8:51:09">2008-9-12 8:51:09</td>
<td align="right" _order="433247">423.09 K</td>
</tr>
<tr>
<td _ext="js">TagControl.js</td>
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
<td align="right" _order="1387">1.35 K</td>
</tr>
<tr>
<td _ext="js">Scroller.js</td>
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
<td align="right" _order="2556">2.5 K</td>
</tr>
<tr>
<td _ext="js">AlertBox.js</td>
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
<td align="right" _order="3565">3.48 K</td>
</tr>
<tr>
<td _ext="htm">1.htm</td>
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td>
<td align="right" _order="11394">11.13 K</td>
</tr>
<tr>
<td _ext="htm">4.htm</td>
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td>
<td align="right" _order="351">351 b</td>
</tr>
<tr>
<td _ext="xml">news.xml</td>
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
<td align="right" _order="14074">13.74 K</td>
</tr>
<tr>
<td _ext="xsl">news.xsl</td>
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
<td align="right" _order="16796">16.4 K</td>
</tr>
<tr>
<td _ext="js">function.js</td>
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
<td align="right" _order="2844">2.78 K</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="tableSort.js"></script>
<script type="text/javascript">
SetOrder("idList", "idTitle", -1);
SetOrder("idList", "idExt", -1, { Attribute: "_ext" });
SetOrder("idList", "idAddtime", -1, { Attribute: "_order", DataType: "date" });
SetOrder("idList", "idSize", -1, { Attribute: "_order", DataType: "int" });
</script>
<table class="common_table_querytool">
<tr>
<td>
</td>
<td align="right">
</td>
</tr>
</table>
</form>
</body>
</html>
