js-Tabellensortierungsklassencode

Autor：Eve Cole Aktualisierungszeit：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>

<Kopf>

<title>table排序类</title>

</head>

<Körper>

.fu_list{ width:400px; border:1px solid #ebebeb;line-height:20px; Schriftgröße: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; Farbe:#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>

<td width=50 align=center><a href=javascript:void(0) id=idSize>Anzeigen</a></td>

</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 $ = Funktion (id) {

Rückgabezeichenfolge == Typ der ID? document.getElementById(id) : id;

};

var-Klasse = {

erstellen: function() {

Rückgabefunktion() {

this.initialize.apply(this, arguments);

}

Object.extend = function(destination, source) {

for (var-Eigenschaft in Quelle) {

Ziel[Eigenschaft] = Quelle[Eigenschaft];

}

Rückreiseziel;

}

Funktion Each(list, fun){

for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }

};

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

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

var TableOrder = Class.create();

TableOrder.prototype = {

initialisieren: function(tbody) {

var oThis = this;

this.Body = $(tbody);//tbody wird angezeigt

this.Rows = [];//行集合

Each(this.Body.rows, function(o){ oThis.Rows.push(o); })

//排序并显示

Sortieren: Funktion(Reihenfolge) {

//排序

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

//比较函数

Vergleiche: Funktion(Reihenfolge) {

var oThis = this;

Rückgabefunktion(o1, o2) {

var value1 = oThis.GetValue(o1, order), value2 = oThis.GetValue(o2, order);

Rückgabewert1 < Wert2 ? -1: Wert1 > Wert2? 1 : 0;

};

//获取比较值

GetValue: function(tr, order) {

var data = tr.getElementsByTagName(td)[order.Index].getAttribute(order.Attribute);

//数据转换

switch (order.DataType.toLowerCase()) {

case int:

Rückgabe parseInt(data) || 0;

Fallschwimmer:

Rückgabe parseFloat(data) || 0;

Falldatum:

Rückgabe Date.parse(data) || 0;

Fallzeichenfolge:

Standard:

return data.toString() || ;

}

//添加并返回一个排序对象

Hinzufügen: function(index, options) {

var oThis = this;

neue Funktion zurückgeben(){

//默认属性

this.Attribute = innerHTML;//获取数据的属性

this.DataType = string;//数据类型

this.Down = false;//Weitere Informationen

Object.extend(this, Optionen || {});

//排序对象的属性

this.Index = index;

this.Sort = function(){ oThis.Sort(this); };

};

}

var to = new TableOrder(idList);

Funktion SetOrder(obj, index, options){

var o = $(obj);

//添加一个排序对象

var order = to.Add(index, Optionen);

o.onclick = function(){

//取相反排序

order.Down = !order.Down;

//设置样式

Each(SetOrder._arr, function(o){ o.className = ; })

o.className = order.Down ? unten: oben;

//排序显示

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>