code de classe de tri de table js

Auteur：Eve Cole Date de mise à jour：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>

<tête>

<méta http-equiv=Content-Type content=text/html; jeu de caractères=gb2312 />

<title>tableau 排序类</title>

</tête>

<corps>

.fu_list{largeur :400px ; bordure : 1 px solide #ebebeb ; hauteur de ligne : 20 px ; taille de police : 12 px ;}

.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; couleur : #333 ;}

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

.fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) centre droit sans répétition ; }

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

</style>

<tête>

<tr>

</tr>

</tête>

<tr>

<td _ext=rar>nouveau.rar</td>

</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>fonction.js</td>

</tr>

</tbody>

</table>

var $ = fonction (identifiant) {

chaîne de retour == type d'identifiant ? document.getElementById(id) : id;

} ;

var Classe = {

créer : fonction() {

fonction de retour() {

this.initialize.apply(this, arguments);

}

Objet.extend = fonction (destination, source) {

pour (propriété var dans la source) {

destination[propriété] = source[propriété];

}

destination de retour ;

}

function Chacun(liste, amusant){

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

} ;

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

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

var TableOrder = Classe.create();

TableOrder.prototype = {

initialiser : fonction (tbody) {

var oThis = ceci ;

this.Body = $(tbody);//tbody对象

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

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

//排序并显示

Trier : fonction (ordre) {

//排序

this.Rows.sort(this.Compare(order));

order.Down && this.Rows.reverse();

//显示表格

var oFragment = document.createDocumentFragment();

Chacun(this.Rows, function(o){ oFragment.appendChild(o); });

this.Body.appendChild(oFragment);

//比较函数

Comparez : fonction(ordre) {

var oThis = ceci ;

fonction de retour (o1, o2) {

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

renvoyer valeur1 < valeur2 ? -1 : valeur1 > valeur2 ? 1 : 0 ;

} ;

//获取比较值

GetValue : fonction (tr, commande) {

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

//数据转换

commutateur (order.DataType.toLowerCase()) {

cas entier :

retourner parseInt(données) || 0 ;

cas flottant :

retourner parseFloat(données) || 0 ;

date du cas :

return Date.parse(data) || 0 ;

chaîne de casse :

défaut:

retourner data.toString() || ;

}

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

Ajouter : fonction (index, options) {

var oThis = ceci ;

renvoyer une nouvelle fonction(){

//默认属性

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

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

this.Down = false;//是否按顺序

Objet.extend(this, options || {});

//排序对象的属性

this.Index = index;

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

} ;

}

var à = new TableOrder(idList);

fonction SetOrder(obj, index, options){

var o = $(obj);

//添加一个排序对象

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

o.onclick = fonction(){

//取相反排序

commande.Down = !order.Down;

//设置样式

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

o.className = commande.Down ? bas : haut;

//排序显示

order.Sort();

renvoie faux ;

}

//_arr是记录排序项目（这里主要用来设置样式）

SetOrder._arr ? SetOrder._arr.push(o) : SetOrder._arr = [];

}

SetOrder(idTitre, 0);

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

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

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

</script>

</corps>

</html>