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>table排序类</title>

</head>

<本文>

<スタイルタイプ=テキスト/css>

.fu_list{ 幅:400px;ボーダー:1px 実線 #ebebeb;line-height:20px;フォントサイズ:12px;}

.fu_list thead td{背景色:#ebebeb;}

.fu_list td{パディング:5px;}

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

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

.fu_list thead a.up、.fu_list thead a.down{ 背景:url(up.gif) 右中央繰り返しなし; }

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

</スタイル>

<頭>

<tr>

</tr>

</thead>

<tr>

</tr>

<tr>

<td _ext=js>タグコントロール.js</td>

</tr>

<tr>

<td _ext=js>スクローラー.js</td>

</tr>

<tr>

<td _ext=js>アラートボックス.js</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</テーブル>

var $ = 関数 (id) {

戻り文字列 == ID の種類 ? document.getElementById(id) : id;

};

var クラス = {

作成: function() {

戻り関数() {

this.initialize.apply(this, 引数);

}

Object.extend = 関数(宛先, ソース) {

for (ソース内の var プロパティ) {

宛先[プロパティ] = ソース[プロパティ];

}

返送先。

}

関数 Each(リスト、楽しみ){

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

};

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

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

var TableOrder = Class.create();

TableOrder.prototype = {

初期化: function(tbody) {

var oThis = これ;

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

this.Rows = [];//行セット

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

}、

//比较関数数

比較: function(order) {

var oThis = これ;

戻り関数(o1, o2) {

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

戻り値1 < 値2 ? -1 : 値1 > 値2 ? 1:0;

};

}、

//获取比较值

GetValue: function(tr, order) {

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

//データ转换

switch (order.DataType.toLowerCase()) {

ケース整数:

parseInt(データ)を返す || 0;

ケースフロート:

parseFloat(data) を返す || 0;

事件の日付:

Date.parse(data) を返す || 0;

大文字と小文字の文字列:

デフォルト：

data.toString() を返す || ;

}

}、

// 追加は一排序オブジェクトを返します

追加: function(インデックス, オプション) {

var oThis = これ;

新しい関数を返す(){

// プロパティ

this.Attribute = innerHTML;//取得データのプロパティ

this.DataType = string;//データ型

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

Object.extend(this, オプション || {});

//排序オブジェクトのプロパティ

this.Index = インデックス;

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

};

}

var to = 新しい TableOrder(idList);

function SetOrder(obj, インデックス, オプション){

var o = $(obj);

//一排序对オブジェクトを追加

var order = to.Add(インデックス, オプション);

o.onclick = function(){

//取相反排序

order.Down = !order.Down;

//設置样式

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

o.className = order.Down ?下：上。

//排序显示

order.Sort();

false を返します。

}

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

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

}

SetOrder(idTitle, 0);

SetOrder(idExt, 0, { 属性: _ext });

SetOrder(idAddtime, 1, { 属性: _order, DataType: date });

SetOrder(idSize, 2, { 属性: _order, データ型: int });

</script>

</body>

</html>