รหัสคลาสการเรียงลำดับตาราง js

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-03-10 16:32:01

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

<!DOCTYPE html สาธารณะ -//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<หัว>

<title>ตาราง 排序类</title>

</หัว>

<ร่างกาย>

<ประเภทสไตล์=ข้อความ/css>

.fu_list{ ความกว้าง:400px; เส้นขอบ:1px ทึบ #ebebeb;line-height:20px; ขนาดตัวอักษร:12px;}

.fu_list thead td {สีพื้นหลัง: #ebebeb;}

.fu_list td{ช่องว่างภายใน:5px;}

.fu_list a{โครงร่าง:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ การตกแต่งข้อความ:none; สี:#333;}

.fu_list ส่วนหัว {padding-right:15px;}

.fu_list thead a.up, .fu_list thead a.down{ พื้นหลัง: url (up.gif) ตรงกลางตรงกลาง ไม่ทำซ้ำ; -

.fu_list thead a.down {พื้นหลังภาพ: url (down.gif);}

</สไตล์>

<เส้นขอบของตาราง=0 ระยะห่างของเซลล์=0 เซลล์แพดดิ้ง=0 คลาส=fu_list>

<หัว>

<tr>

<td width=50 align=center><a href=javascript:void(0) id=idSize>ตัวใหญ่</a></td>

</tr>

</หัว>

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

</ตาราง>

<ประเภทสคริปต์=ข้อความ/จาวาสคริปต์>

var $ = ฟังก์ชั่น (id) {

ส่งคืนสตริง == ประเภทของ id ? document.getElementById(id) : id;

วาร์คลาส = {

สร้าง: ฟังก์ชั่น () {

ฟังก์ชันส่งคืน () {

this.initialize.apply (สิ่งนี้ ข้อโต้แย้ง);

Object.extend = function (ปลายทาง, แหล่งที่มา) {

สำหรับ (คุณสมบัติ var ในแหล่งที่มา) {

ปลายทาง [คุณสมบัติ] = แหล่งที่มา [คุณสมบัติ];

จุดหมายปลายทางขากลับ;

ฟังก์ชั่น Each (รายการ, สนุก) {

สำหรับ (var i = 0, len = list.length; i < len; i++) { สนุก (รายการ [i], i); -

var TableOrder = Class.create();

TableOrder.ต้นแบบ = {

เริ่มต้น: ฟังก์ชั่น (tbody) {

var oThis = นี้;

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

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

แต่ละ (this.Body.rows, function(o){ oThis.Rows.push(o); })

//排序并显示

เรียงลำดับ: ฟังก์ชั่น (ลำดับ) {

//排序

this.Rows.sort(this.Compare(สั่งซื้อ));

สั่งซื้อลง && นี้แถวย้อนกลับ ();

//显示表格

var oFragment = document.createDocumentFragment();

แต่ละ (this.Rows, ฟังก์ชั่น (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 = tr.getElementsByTagName(td)[order.Index].getAttribute(order.Attribute);

//数据转换

สวิตช์ (order.DataType.toLowerCase()) {

กรณี int:

กลับ parseInt (ข้อมูล) || 0;

กรณีลอย:

กลับ parseFloat (ข้อมูล) || 0;

วันที่คดี:

กลับ Date.parse (ข้อมูล) || 0;

สตริงกรณี:

ค่าเริ่มต้น:

กลับ data.toString() || -

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

เพิ่ม: ฟังก์ชั่น (ดัชนี ตัวเลือก) {

var oThis = นี้;

กลับฟังก์ชั่นใหม่ () {

//默认属性

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

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

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

Object.extend (นี่ ตัวเลือก || {});

//排序对象的属性

this.Index = ดัชนี;

this.Sort = function(){ oThis.Sort (นี้); -

var to = TableOrder ใหม่ (idList);

ฟังก์ชั่น SetOrder (obj, ดัชนี, ตัวเลือก) {

var o = $(obj);

//添加一个排序对象

var order = to.Add(ดัชนี, ตัวเลือก);

o.onclick = ฟังก์ชั่น(){

//取相反排序

order.Down = !order.Down;

//设置样式

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 });

</สคริปต์>

</ร่างกาย>

</html>