código de classe de classificação de tabela js

Autor：Eve Cole Data da Última Atualização：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>

<cabeça>

<title>tabela排序类</title>

</head>

<corpo>

.fu_list{largura:400px; borda:1px sólido #ebebeb;altura da linha:20px; tamanho da fonte: 12px;}

.fu_list thead td{cor de fundo:#ebebeb;}

.fu_list td{preenchimento:5px;}

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

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

.fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) centro direito sem repetição; }

.fu_list thead a.down{imagem de fundo:url(down.gif);}

</estilo>

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

<td align=right _order=351>351 bilhões</td>

</tr>

<tr>

<td _ext=xml>notícias.xml</td>

</tr>

<tr>

<td _ext=xsl>notícias.xsl</td>

</tr>

<tr>

<td _ext=js>função.js</td>

</tr>

</tbody>

</tabela>

var $ = função (id) {

retornar string == tipo de id? document.getElementById(id): id;

};

var Classe = {

criar: função() {

função de retorno() {

this.initialize.apply(isto, argumentos);

}

Object.extend = function(destino, origem) {

for (var propriedade na fonte) {

destino[propriedade] = origem[propriedade];

}

destino de retorno;

}

função Cada(lista, diversão){

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

};

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

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

var TableOrder = Class.create();

TableOrder.prototype = {

inicializar: function(tbody) {

var oIsso = isso;

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

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

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

//排序并显示

Ordenar: function(ordem) {

//排序

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

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

//显示表格

var oFragment = document.createDocumentFragment();

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

this.Body.appendChild(oFragment);

//比较函数

Comparar: function(ordem) {

var oIsso = isso;

função de retorno (o1, o2) {

var valor1 = oThis.GetValue(o1, pedido), valor2 = oThis.GetValue(o2, pedido);

retornar valor1 < valor2 ? -1: valor1 > valor2? 1: 0;

};

//获取比较值

ObterValor: function(tr, pedido) {

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

//数据转换

mudar (order.DataType.toLowerCase()) {

caso interno:

retornar parseInt(dados) || 0;

caso flutuante:

retornar parseFloat(dados) || 0;

data do caso:

retornar Data.parse(dados) || 0;

sequência de casos:

padrão:

retornar dados.toString() || ;

}

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

Adicione: function(índice, opções) {

var oIsso = isso;

retornar nova função(){

//默认属性

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

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

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

Object.extend(isto, opções || {});

//排序对象的属性

this.Index = índice;

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

};

}

var para = new TableOrder(idList);

function SetOrder(obj, índice, opções){

var o = $(obj);

//添加一个排序对象

var pedido = to.Add(índice, opções);

o.onclick = function(){

//取相反排序

pedido.Down = !pedido.Down;

//设置样式

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

o.className = pedido.Down? para baixo: para cima;

//排序显示

pedido.Sort();

retornar falso;

}

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

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

}

SetOrder(idTitle, 0);

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

SetOrder(idAddtime, 1, {Atributo: _order, DataType: data });

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

</script>

</body>

</html>