código de clase de clasificación de tabla js

Autor：Eve Cole Fecha de actualización：2025-03-10 16:32:01

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

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

<title>tabla排序类</title>

</cabeza>

.fu_list{ ancho:400px; borde: 1 px sólido #ebebeb; altura de línea: 20 px; tamaño de fuente: 12px;}

.fu_list el encabezado td{fondo-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 encabeza un{padding-right:15px;}

.fu_list thead a.up, .fu_list thead a.down{ fondo:url(up.gif) centro derecha sin repetición; }

.fu_list el encabezado a.down{imagen-de-fondo:url(down.gif);}

</estilo>

<tr>

</tr>

</thead>

<tr>

<td _ext=rar>nuevo.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>

<td _ext=xml>noticias.xml</td>

</tr>

<tr>

<td _ext=xsl>noticias.xsl</td>

</tr>

<tr>

<td _ext=js>función.js</td>

</tr>

</tbody>

</tabla>

var $ = función (identificación) {

cadena de retorno == tipo de identificación? document.getElementById(id): identificación;

};

clase var = {

crear: función() {

función de retorno() {

this.initialize.apply(esto, argumentos);

}

Objeto.extender = función (destino, fuente) {

para (propiedad var en fuente) {

destino[propiedad] = fuente[propiedad];

}

destino de regreso;

}

función Cada(lista, diversión){

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

};

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

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

var OrdenTabla = Class.create();

TableOrder.prototipo = {

inicializar: función (tbody) {

var oEsto = esto;

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

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

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

//排序并显示

Ordenar: función (orden) {

//排序

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

orden.Abajo && this.Rows.reverse();

//显示表格

var oFragment = document.createDocumentFragment();

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

this.Body.appendChild(oFragmento);

//比较函数

Comparar: función (orden) {

var oEsto = esto;

función de retorno (o1, o2) {

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

valor de retorno1 <valor2? -1: valor1 > valor2? 1: 0;

};

//获取比较值

ObtenerValor: función(tr, orden) {

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

//数据转换

cambiar (order.DataType.toLowerCase()) {

caso int:

devolver parseInt(datos) || 0;

flotador de caso:

devolver parseFloat(datos) || 0;

fecha del caso:

devolver Fecha.parse(datos) || 0;

cadena de casos:

por defecto:

devolver datos.toString() || ;

}

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

Agregar: función (índice, opciones) {

var oEsto = esto;

devolver nueva función(){

//默认属性

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

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

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

Object.extend(esto, opciones || {});

//排序对象的属性

this.Index = índice;

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

};

}

var a = new TableOrder(idList);

función EstablecerOrden(obj, índice, opciones){

var o = $(obj);

//添加一个排序对象

orden var = to.Add(índice, opciones);

o.onclick = función(){

//取相反排序

orden.Abajo = !orden.Abajo;

//设置样式

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

o.className = orden.Abajo? abajo: arriba;

//排序显示

orden.Ordenar();

devolver falso;

}

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

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

}

EstablecerOrden(idTitle, 0);

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

SetOrder(idAddtime, 1, {Atributo: _order, Tipo de datos: fecha });

SetOrder(idSize, 2, {Atributo: _order, Tipo de datos: int });

</script>

</cuerpo>

</html>