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>

</head>

<본문>

<스타일 유형=텍스트/css>

.fu_list{ 너비:400px; 테두리:1px 실선 #ebebeb;줄 높이:20px; 글꼴 크기:12px;}

.fu_list 광고 td{배경색:#ebebeb;}

.fu_list td{패딩:5px;}

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

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

.fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) 오른쪽 중앙 no-repeat; }

.fu_list 광고 a.down{배경-이미지:url(down.gif);}

</style>

<테이블 테두리=0 셀 간격=0 셀 패딩=0 클래스=fu_list>

<머리>

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

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

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

</tr>

</tbody>

</table>

<스크립트 유형=텍스트/자바스크립트>

var $ = 함수(id) {

반환 문자열 == ID 유형 ? document.getElementById(id) : id;

};

var 클래스 = {

생성: 함수() {

반환 함수() {

this.initialize.apply(this, 인수);

}

Object.extend = function(대상, 소스) {

for(소스의 var 속성) {

목적지[속성] = 소스[속성];

}

귀국 목적지;

}

함수 Each(목록, 재미){

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

};

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

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

var TableOrder = Class.create();

TableOrder.prototype = {

초기화: 함수(tbody) {

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

//显示表格

var oFragment = document.createDocumentFragment();

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

this.Body.appendChild(oFragment);

//比较函数

비교: 함수(순서) {

var oThis = 이것;

반환 함수(o1, o2) {

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

반환 값1 < 값2 ? -1 : 값1 > 값2 ? 1:0;

};

//获取比较值

GetValue: 함수(tr, 순서) {

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

//数据转换

스위치(order.DataType.toLowerCase()) {

케이스 내부:

반환 parInt(data) || 0;

케이스 플로트:

반환 ParseFloat(data) || 0;

사건 날짜:

return Date.parse(data) || 0;

케이스 문자열:

기본:

return data.toString() || ;

}

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

추가: function(index, options) {

var oThis = 이것;

새로운 함수를 반환합니다(){

//默认属性

this.Attribute = innerHTML;//설명

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

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

Object.extend(this, 옵션 || {});

//排序对象의 성질

this.Index = 인덱스;

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

};

}

var to = new TableOrder(idList);

함수 SetOrder(obj, 인덱스, 옵션){

var o = $(obj);

//添加一个排序对象

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

o.onclick = 함수(){

//取反排序

주문.다운 = !주문.다운;

//设置样式

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

o.className = 주문.다운 ? 아래 : 위;

//排序显示

주문.정렬();

거짓을 반환;

}

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

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

}

SetOrder(idTitle, 0);

SetOrder(idExt, 0, { 속성: _ext });

SetOrder(idAddtime, 1, { 속성: _order, 데이터 유형: 날짜 });

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

</script>

</body>

</html>