js table sorting class code

Author：Eve Cole Update Time：2025-03-10 16:32:01

可以对表格的各列进行排序的函数类

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<head>

<title>table排序类</title>

</head>

<body>

.fu_list{ width:400px; border:1px solid #ebebeb;line-height:20px; font-size:12px;}

.fu_list thead td{background-color:#ebebeb;}

.fu_list td{padding:5px;}

.fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ text-decoration:none; color:#333;}

.fu_list thead a{padding-right:15px;}

.fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) right center no-repeat; }

.fu_list thead a.down{background-image:url(down.gif);}

</style>

<thead>

<tr>

</tr>

</thead>

<tr>

</tr>

<tr>

<td _ext=js>TagControl.js</td>

</tr>

<tr>

<td _ext=js>Scroller.js</td>

</tr>

<tr>

<td _ext=js>AlertBox.js</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td _ext=js>function.js</td>

</tr>

</tbody>

</table>

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));

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 = new TableOrder(idList);

function SetOrder(obj, index, options){

var o = $(obj);

//添加一个排序对象

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 = [];

}

SetOrder(idTitle, 0);

SetOrder(idExt, 0, { Attribute: _ext });

SetOrder(idAddtime, 1, { Attribute: _order, DataType: date });

SetOrder(idSize, 2, { Attribute: _order, DataType: int });

</script>

</body>

</html>