序二（09/05/03）

近來還是那么忙，趁五一更新一下程序吧。
這個版本主要增加和改進了以下東西：
1，對字符串改用localeCompare來比較；
2，一次排序中能使用多個排序對象（用于值相等時再排序）；
3，修正一些發現的問題；
4，改進程序結構，個人覺得是更靈活更方便了；
5，增加bool類型比較；
6，添加attribute/property的內容；
7，修正ie6/7的radio/checkbox狀態恢復bug；
8，增加自定義取值函數。

序一（08/10/06）

前一陣做了個網盤，用到了table的排序，趁熱打鐵做一個完整的table排序類出來。
程序的實現的是在客戶端對表格進行排序，有以下特點：
1，自定義排序列、排序屬性（例如innerHTML）、排序數據類型（包括int、float、date、string）、排序順序（順序和倒序）；
2，自定義排序函數；
3，可同時設置多個排序列；

網上也有很多其他的table排序函數，但有的是基于數組，有的不夠靈活。本程序是在原有table結構上加入功能，套用一個流行詞叫“無侵入”。

效果預覽

有中文的先排前面，再按時間倒序，ID倒序排序：

基本步驟

1，把需要排序的行放到tbody中（程序會直接取tbody的rows）；

2，把排序行放到一個數組中；

3，按需求對數組進行排序（用數組的sort方法）； 

4，用一個文檔碎片（document.createDocumentFragment()）保存排好序的行；

ps：文檔碎片并不是必須的，但建議使用，大量dom操作時使用文檔碎片會更有效率。

5，把文檔碎片插入到tbody中。

程序說明

【排序函數】

排序就不得不說數組中sort這個方法，手冊是這樣介紹的：返回一個元素已經進行了排序的 Array 對象。也就是對一個數組進行排序，很多跟排序相關的操作都用到這個方法。

默認按照 ASCII 字符順序進行升序排列，使用參數的話可以自定義排序方法，程序的compare程序就是用來自定義排序的。
一般來說排序函數會有兩個默認參數分別是兩個比較對象，程序中根據需要在調用compare時bind了兩個參數，所以會有4個參數。
要注意，排序函數必須返回下列值之一：
負值，如果所傳遞的第一個參數比第二個參數小。
零，如果兩個參數相等。
正值，如果第一個參數比第二個參數大。

在取得比較值（后面說明）之后就進行值的比較。
程序中如果是字符串，會用localeCompare獲取比較結果，否則就直接相減得到比較結果：

如果desc屬性是true（降序排序），那么在result的基礎上乘以-1就能得到相反的排序了：

【獲取比較值】

程序中是根據排序對象和_value方法從每個tr中獲取比較值的。
首先通過index（td索引）和property（屬性）獲取對應的值。
如果沒有適合的屬性放要比較的值的話，可以給td設一個自定義屬性來放這個值（如例子中的_ext）。
對于在html中設置的自定義屬性，ie可以用[x]和getAttribute來取，而ff就只能用getAttribute來獲取（后面會詳細說明）。
所以只需考慮ff的情況就行了，程序中用in來判斷這個屬性是否可以用[x]方式獲取：

如果in運算是true，那么可以用關鍵詞方式取值，否則用getAttribute來取。
取得值之后就進行比較值轉換：

Code
switch (order.DataType.toLowerCase()) {
    case "int":
        return parseInt(data, 10) || 0;
    case "float":
        return parseFloat(data, 10) || 0;
    case "date":
        return Date.parse(data) || 0;
    case "bool":
        return data === true || String(data).toLowerCase() == "true" ? 1 : 0;
    case "string":
    default:
        return data.toString() || "";
}

這里會把日期用Date.parse轉化成整數的形式方便比較，但要注意Date.parse的參數必須符合js的日期格式（參考這里）。
對于bool值的比較，會判斷是不是true或字符串的"true"，其他都一律看成false。
ps：如果覺得添加自定義屬性不符合標準，可以考慮放在title之類的屬性中。

【attribute/property】

在獲取比較值的時候會用in來判斷是否可以用[x]方式，其實是判斷該屬性是屬于attribute還是property。
那attribute和property到底是什么呢，有什么區別呢？這個或許很多人都沒留意，或許認為是同一個東西。
要明確attribute和property是不同的東西就要先知道它們分別是什么，這個很難說得清，舉些例子就明白了。
這里我們先以ff為標準，后面再說ie的區別。以div為例，查查網頁制作完全手冊，會找到它有以下屬性：
ALIGN      align
CLASS      className
ID            id
TITLE       title
...            ...
其中第一列就是attribute，第二列就是property。
attribute是dom元素在文檔中作為html標簽擁有的屬性，property就是dom元素在js中作為對象擁有的屬性。
例如在html中dom作為頁面元素應該直接用class屬性，對應在js中作為dom對象就必須用className屬性。
由于attribute是不分大小寫的，這使得大部分的attribute和property看起來會一樣，使人誤以為同一個東西（當然ie的責任也很大）。
還不相信的話可以用ff看看下面的例子：

可以看出getAttribute和[x]方式得到了不同的答案。
這里必須先說說getAttribute和[x]方式的區別，getAttribute和setAttribute是專門用來獲取和設置attribute的，
而[x]方式就是獲取和設置property屬性的，這個property跟我們一般操作的js對象的屬性是一樣的。
或許有人會有疑問，像id，title不是都指向同一個屬性嗎，修改property對應attribute也會跟著修改。
其實我們也可以自定義一個這樣的屬性，在ff測試下面的代碼：

Code
<div id="t" tt="1">test</div>
<script>
var o = document.getElementById('t');
o.__defineSetter__("tt", function(x) { this.setAttribute("tt", x); });
o.__defineGetter__("tt", function() { return this.getAttribute("tt"); });
o.tt="2";
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
</script>

這樣就實現了“修改property對應attribute也會跟著修改”的屬性了。
從測試例子還可以看到attribute跟對應的property完全可以使用不一樣的屬性名，像class和className的效果。
也能在Getter中對attribute的值進行處理再返回，就像href的property值是attribute的完整路徑形式。
而property可以沒有對應的attribute，反過來也一樣，像innerHTML這樣的property就沒有對應的attribute。
ps：以上只是說明實現的原理，事實上并不需要這樣來實現。

既然知道attribute和property是不同的東西，那如何分辨一個屬性是屬于attribute還是property呢。
我們可以用in來判斷property，用hasAttribute判斷attribute。
但ie6/7沒有hasAttribute，是不是只能用in來判斷呢？對了一半，因為ie6/7根本就不需要hasAttribute。
在ie6/7中，并沒有很好地區分attribute和property。例如ie6/7運行下面代碼：

Code
<div id="t" tt="1">test</div>
<script>
var o = document.getElementById('t');
o["tt"]="2";
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
o.setAttribute("tt","3");
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
o["rr"]="4";
document.writeln(o.getAttribute("rr"));
document.writeln(o["rr"]);
document.writeln(o.getAttribute("innerHTML"));
document.writeln(o["innerHTML"]);
</script>

可以看到，里面基本沒有attribute和property之分，而ie8的結果除了getAttribute("innerHTML")，其他跟ie6/7一樣。
當然我覺得ie的制作者肯定知道attribute和property的區別，只是他們為了得到使用者想當然的結果，所以才這么弄。
本來被這么忽悠也沒什么不好，但后來我發現一個問題：

這樣修改的樣式是無效的，按照ie的規矩要使用className，但問題是從outerHTML中居然看到div標簽中有兩個class屬性。
之前我一直都不知如何理解ie這個現象，不過這在ie8中已經得到了修正。
在ie8中已經把attribute和property區分開了（詳細看Attribute Differences in Internet Explorer 8）。
例如getAttribute("innerHTML")返回的是null，說明innerHTML不再是attribute；setAttribute("class",x)修改的是attribute，不再是給dom元素添加一個莫名其妙的class屬性；貌似getAttribute也沒有了第二個參數（getAttribute的第二個參數可以看這里）；還有name屬性的混亂問題也正常了（參考這里）。
不過ie8依然使用添加新屬性會同時是attribute和property的模式，估計還是為了兼容之前的版本，可憐的ie8。

ps：以上都以[x]為例子，而使用.運算符的效果跟[x]是一樣的。
ps2：由于對dom沒有很深入的了解，這部分可能會有問題，歡迎各位指出。
ps3：發現自己的dom知識太少，正準備找本dom的書看看。

【radio/checkbox的checked狀態bug】

可以用ie6/7測試下面代碼：

Code
<div id="c">
<input type="checkbox" id="a" />
<input name="b" type="radio" id="b" />
</div>
<input type="button" value="click" id="btn" />
<script>
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
document.getElementById("btn").onclick = function(){
    c.appendChild(a);
    c.appendChild(b);
    var o1 = document.createElement("input");
    o1.type = "checkbox"; o1.checked = true;
    c.appendChild(o1);
    var o2 = document.createElement("input");
    o2.type = "radio"; o2.checked = true;
    c.appendChild(o2);
}
</script>

先點選checkbox和radio，然后點擊按鈕，在ie6會發現checkbox和radio都恢復到沒有點選的狀態，ie7好點只是radio有問題。
而且新插入的checkbox和radio雖然checked都設置成true，但顯示出來還是沒有選擇的狀態。
這里其實都是一個問題，checkbox和radio在一些dom操作之后（例如這里的appendChild），checked會自動恢復成defaultChecked的狀態。
創建元素的問題可以參考這里。
程序中tr在排序后會用appendChild重新插入文檔，結果就會導致上面的問題了，解決方法暫時想到三個：
1，在appendChild之前修改defaultChecked。
針對appendChild后會自動恢復成defaultChecked，那我們就在appendChild前把defaultChecked修改成當前的checked值。
這個解決方法不錯，只要appendChild之前掃一遍表單控件就行，但問題是這會影響到reset的結果，因為reset之后checkbox/radio的checked就會恢復成defaultChecked的值，如果修改了defaultChecked那reset就失去了效果。
2，在appendChild之前保存checked的狀態，并在appendChild之后恢復。
要實現這個也有兩個方法，一個是用一個數組或對象來保存checkbox/radio當前的checked值，在appendChild之后找出對應的值并設置。
另一個是直接把checkbox/radio當前的checked值保存到該控件的一個自定義屬性中，在appendChild之后再獲取并設置。
兩個方法都要掃兩次表單控件，后者比較方便。
3，在appendChild之前找出checked跟defaultChecked不相等的控件，并在appendChild之后重新設置這些控件。
這個方法比前一個稍好，只要在appendChild之前掃一遍控件，并篩選出需要修正的（checked跟defaultChecked不相等的），在appendChild之后設置checked為defaultChecked的相反值就行了。

程序用的是第3個方法，在appendChild之前用_getChecked方法獲取要修正的checkbox/radio集合：

在appendChild之后用_setChecked重新設置checked值：

但這樣效率還是比較低，所以除了考慮瀏覽器：

還可以自定義的repair來決定是否需要修正：

如果有更好的方法記得告訴我啊。

【排序對象】

為了程序的更靈活，加了一個排序對象的東西。
這個排序對象有以下屬性：
屬性  默認值//說明
index:  0,//td索引
property: "innerHTML",//獲取數據的屬性
type:  "string",//比較的數據類型
desc:  true,//是否按降序
compare: null,//自定義排序函數
value:  null,//自定義取值函數
repair:  this._repair,//是否解決checkbox和radio狀態恢復bug
onBegin: function(){},//排序前執行
onEnd:  function(){}//排序后執行

可以看出這個排序對象就是用來保存該排序的規則和方式的，也就是用來告訴程序要怎么排序。
采用這個模式是因為一個table通常同時需要多個不同的排序方式，使用排序對象就像玩拳王選人，哪個適合就用哪個。
而程序在一次排序過程中還可以設置多個排序對象，當比較值相等時，再用下一個排序對象比較。
用這個方式會更方便，重用性更好。

程序中通過creat程序來創建排序對象，其參數就是自定義的屬性：

執行sort程序就會進行排序，但必須一個或多個的排序對象為參數。
在sort程序中會先把排序對象參數轉換成數組：

然后傳遞到_compare程序中，當比較結果是0（即相等），同時有下一個排序對象，就會用下一個排序對象繼續_compare：

這樣的方式可以最大限度的利用已建立的排序對象。

使用方法

首先實例化一個主排序對象，參數是table的id：

如果需要設置默認屬性，一般建議在new的時候設置。

接著用creat方法添加一個排序對象，參數是要設置的屬性對象（參考【排序對象】）：

然后就可以用sort方法配合排序對象為參數來排序了：

程序源碼 

Code
var TableOrder = function(table, options) {
    this._checked = [];//存放checkbox和radio集合
    
    var tBody = $$(table).tBodies[0];
    this._tBody = tBody;//tbody對象
    this._rows = $$A.map(tBody.rows, function(o){ return o; });//行集合
    
    this._setOptions(options);
}
TableOrder.prototype = {
  _repair: $$B.ie6 || $$B.ie7,//在ie6/7才需要修復bug
  //設置默認屬性
  _setOptions: function(options) {
    this.options = {//默認值
        index:        0,//td索引
        property:    "innerHTML",//獲取數據的屬性 
        type:        "string",//比較的數據類型
        desc:        true,//是否按降序
        compare:    null,//自定義排序函數
        value:        null,//自定義取值函數
        repair:        this._repair,//是否解決checkbox和radio狀態恢復bug
        onBegin:    function(){},//排序前執行
        onEnd:        function(){}//排序后執行
    };
    $$.extend(this.options, options || {});
  },
  //排序并顯示
  sort: function() {
    //沒有排序對象返回
    if(!arguments.length){ return false };
    var orders = Array.prototype.slice.call(arguments);
    //執行附加函數
    orders[0].onBegin();
    //排序
    this._rows.sort($$F.bind( this._compare, this, orders, 0 ));
    //獲取集合
    var repair = this._repair && $$A.some(orders, function(o){ return o.repair; });
    repair && this._getChecked();
    //顯示表格
    var frag = document.createDocumentFragment();
    $$A.forEach(this._rows, function(o){ frag.appendChild(o); });
    this._tBody.appendChild(frag);
    //恢復狀態
    repair && this._setChecked();
    //執行附加函數
    orders[0].onEnd();
  },
  //比較函數
  _compare: function(orders, i, tr1, tr2) {
    var od = orders[i], value1 = this._value(od, tr1), value2 = this._value(od, tr2)
        ,result = od.compare ? od.compare(value1, value2) ://使用自定義排序函數
            typeof value2 == "string" ? value1.localeCompare(value2) : (value1 - value2);
    //如果result是0(值相同)同時有下一個排序對象的話繼續比較否則根據desc修正結果并返回
    return !result && od[++i] ? this._compare(orders, i, tr1, tr2) : (od.desc ? -1 : 1) * result;
  },
  //獲取比較值
  _value: function(order, tr) {
    var td = tr.cells[order.index], att = order.property
        ,data = order.value ? order.value(td) ://使用自定義取值函數
            att in td ? td[att] : td.getAttribute(att);
    //數據轉換
    switch (order.type.toLowerCase()) {
        case "int":
            return parseInt(data, 10) || 0;
        case "float":
            return parseFloat(data, 10) || 0;
        case "date":
            return Date.parse(data) || 0;
        case "bool":
            return data === true || String(data).toLowerCase() == "true" ? 1 : 0;
        case "string":
        default:
            return data.toString() || "";
    }
  },
  //創建并返回一個排序對象
  creat: function(options) {
    return $$.extend($$.extend({}, this.options), options || {});
  },
  //獲取要修正的checkbox和radio集合
  _getChecked: function() {
    this._checked = $$A.filter(this._tBody.getElementsByTagName("input"), function(o){
        return (($$B.ie6 && o.type == "checkbox") || o.type == "radio") &&
            o.checked != o.defaultChecked;
    });
  },
  //設置checkbox和radio集合的checked
  _setChecked: function() {
    $$A.forEach(this._checked, function(o){ o.checked = !o.defaultChecked; });
  }
}

下載完整實例