Код класса сортировки таблиц js

Автор：Eve Cole Время обновления：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>

<голова>

<title>таблица排序类</title>

</голова>

<тело>

<тип стиля=текст/css>

.fu_list{ширина:400 пикселей; граница: 1 пиксель сплошной #ebebeb; высота линии: 20 пикселей; размер шрифта: 12 пикселей;}

.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; цвет:#333;}

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

.fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) справа по центру, без повтора; }

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

</стиль>

<граница таблицы=0 cellspaceing=0 cellpadding=0 class=fu_list>

<голова>

<тр>

</tr>

</thead>

<тр>

<td _ext=rar>новый.rar</td>

</tr>

<тр>

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

</tr>

<тр>

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

</tr>

<тр>

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

</tr>

<тр>

</tr>

<тр>

</tr>

<тр>

</tr>

<тр>

</tr>

<тр>

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

</tr>

</tbody>

</таблица>

<тип сценария=текст/javascript>

вар $ = функция (id) {

возвращаемая строка == идентификатор типа? document.getElementById(id): идентификатор;

};

вар Класс = {

создать: функция() {

функция возврата() {

this.initialize.apply(это, аргументы);

}

Object.extend = функция(назначение, источник) {

for (свойство var в исходном коде) {

назначение [свойство] = источник [свойство];

}

обратный пункт назначения;

}

функция Каждый(список, забава){

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

};

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

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

вар TableOrder = Class.create();

TableOrder.prototype = {

инициализировать: функция (tbody) {

вар oThis = это;

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

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

Каждый(this.Body.rows, function(o){ oThis.Rows.push(o); })

//排序并显示

Сортировка: функция (порядок) {

//排序

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

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

// 显示表格

вар oFragment = document.createDocumentFragment();

Каждый(this.Rows, function(o){ oFragment.appendChild(o); });

this.Body.appendChild(oFragment);

//比较函数

Сравните: функция(порядок) {

вар oThis = это;

возвращаемая функция (о1, о2) {

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

возвращаемое значение1 <значение2? -1: значение1 > значение2? 1:0;

};

//获取比较值

GetValue: функция (tr, заказ) {

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

//数据转换

переключатель (order.DataType.toLowerCase()) {

регистр интервал:

вернуть parseInt(данные) || 0;

корпус поплавок:

вернуть parseFloat(данные) || 0;

дата дела:

вернуть Date.parse(данные) || 0;

строка случая:

по умолчанию:

вернуть данные.toString() || ;

}

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

Добавить: функция (индекс, параметры) {

вар oThis = это;

вернуть новую функцию(){

// 默认属性

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

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

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

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

//排序对象的属性

this.Index = индекс;

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

};

}

вар = новый TableOrder (idList);

функция SetOrder(obj, index, options) {

вар о = $(объект);

//添加一个排序对象

вар заказ = to.Add(индекс, параметры);

о.onclick = функция(){

//取相反排序

заказ.Вниз = !order.Вниз;

//设置样式

Каждый (SetOrder._arr, функция (о) { o.className = ; })

o.className = order.Down? вниз: вверх;

//排序显示

порядок.Сортировать();

вернуть ложь;

}

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

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

}

SetOrder(idTitle, 0);

SetOrder(idExt, 0, {Атрибут: _ext});

SetOrder(idAddtime, 1, {Атрибут: _order, DataType: дата });

SetOrder(idSize, 2, {Атрибут: _order, DataType: int });

</скрипт>

</тело>

</html>