近來還是那么忙，趁五一更新一下程序吧。
這個版本主要增加和改進(jìn)了以下東西：
1，對字符串改用localeCompare來比較；
2，一次排序中能使用多個排序?qū)ο螅ㄓ糜谥迪嗟葧r再排序）；
3，修正一些發(fā)現(xiàn)的問題；
4，改進(jìn)程序結(jié)構(gòu)，個人覺得是更靈活更方便了；
5，增加bool類型比較；
6，添加attribute/property的內(nèi)容；
7，修正ie6/7的radio/checkbox狀態(tài)恢復(fù)bug；
8，增加自定義取值函數(shù)。

打包代碼
基本步驟

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

2，把排序行放到一個數(shù)組中；

this.Rows = Map(this.tBody.rows, function(o){ return o; });

3，按需求對數(shù)組進(jìn)行排序（用數(shù)組的sort方法）；

this.Rows.sort(Bind(this, this.Compare, orders, 0));

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


var oFragment = document.createDocumentFragment();
forEach(this.Rows, function(o){ oFragment.appendChild(o); });

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

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

this.tBody.appendChild(oFragment);


程序說明

【排序函數(shù)】

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

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

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

result = order.Compare ? order.Compare(value1, value2) ://使用自定義排序
typeof value2 == "string" ? value1.localeCompare(value2) : (value1 - value2);

如果Desc屬性是true（倒序排序），那么在result的基礎(chǔ)上乘以-1就能得到相反的排序了：(order.Down ? -1 : 1) * result


【獲取比較值】

程序中是根據(jù)排序?qū)ο蠛虶etValue方法從每個tr中獲取比較值的。
首先通過Index（td索引）和Attri（屬性）獲取對應(yīng)的值。
如果沒有適合的屬性放要比較的值的話，可以給td設(shè)一個自定義屬性來放這個值（如例子中的_ext）。
對于在html中設(shè)置的自定義屬性，ie可以用[x]和getAttribute來取，而ff就只能用getAttribute來獲取（后面會詳細(xì)說明）。
所以只需考慮ff的情況就行了，程序中用in來判斷這個屬性是否可以用[x]方式獲?。?

var td = tr.getElementsByTagName("td")[order.Index]
, at = order.Attri, data = at in td ? td[at] : td.getAttribute(at);

如果in運(yùn)算是true，那么可以用關(guān)鍵詞方式取值，否則用getAttribute來取。
取得值之后就進(jìn)行比較值轉(zhuǎn)換，這里會把日期用Date.parse轉(zhuǎn)化成整數(shù)的形式方便比較：

switch (order.DataType.toLowerCase()) {
case "int":
return parseInt(data) || 0;
case "float":
return parseFloat(data) || 0;
case "date":
return Date.parse(data) || 0;
case "string":
default:
return data.toString() || "";
}

要注意Date.parse的參數(shù)必須符合js的日期格式（參考這里）。
ps：如果覺得添加自定義屬性不符合標(biāo)準(zhǔn)，可以考慮放在title之類的屬性中。


【attribute/property】

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

<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"]);
</script>

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

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

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

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

<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的結(jié)果除了getAttribute("innerHTML")，其他跟ie6/7一樣。
當(dāng)然我覺得ie的制作者肯定知道attribute和property的區(qū)別，只是他們?yōu)榱说玫绞褂谜呦氘?dāng)然的結(jié)果，所以才這么弄。
本來被這么忽悠也沒什么不好，但后來我發(fā)現(xiàn)一個問題：

<div id="t" class="a">test </div>
<script>
var o = document.getElementById('t');
o.setAttribute("class","b");
alert(o.outerHTML);
</script>

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

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


【radio/checkbox的checked狀態(tài)bug】

可以用ie6/7測試下面代碼：
<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>

先點(diǎn)選checkbox和radio，然后點(diǎn)擊按鈕，在ie6會發(fā)現(xiàn)checkbox和radio都恢復(fù)到?jīng)]有點(diǎn)選的狀態(tài)，ie7好點(diǎn)只是radio有問題。
而且新插入的checkbox和radio雖然checked都設(shè)置成true，但顯示出來還是沒有選擇的狀態(tài)。
這里其實(shí)都是一個問題，checkbox和radio在一些dom操作之后（例如這里的appendChild），checked會自動恢復(fù)成defaultChecked的狀態(tài)。
創(chuàng)建元素的問題可以參考這里。
程序中tr在排序后會用appendChild重新插入文檔，結(jié)果就會導(dǎo)致上面的問題了，解決方法暫時想到三個：
1，在appendChild之前修改defaultChecked。
針對appendChild后會自動恢復(fù)成defaultChecked，那我們就在appendChild前把defaultChecked修改成當(dāng)前的checked值。
這個解決方法不錯，只要appendChild之前掃一遍表單控件就行，但問題是這會影響到reset的結(jié)果，因?yàn)閞eset之后checkbox/radio的checked就會恢復(fù)成defaultChecked的值，如果修改了defaultChecked那reset就失去了效果。
2，在appendChild之前保存checked的狀態(tài)，并在appendChild之后恢復(fù)。
要實(shí)現(xiàn)這個也有兩個方法，一個是用一個數(shù)組或?qū)ο髞肀４鎐heckbox/radio當(dāng)前的checked值，在appendChild之后找出對應(yīng)的值并設(shè)置。
另一個是直接把checkbox/radio當(dāng)前的checked值保存到該控件的一個自定義屬性中，在appendChild之后再獲取并設(shè)置。
兩個方法都要掃兩次表單控件，后面的方法比較方便。
3，在appendChild之前找出checked跟defaultChecked不相等的控件，并在appendChild之后重新設(shè)置這些控件。
這個方法比前一個稍好，只要在appendChild之前掃一遍控件，并篩選出需要修正的（checked跟defaultChecked不相等的），在appendChild之后設(shè)置checked為defaultChecked的相反值就行了。
程序用的是第3個方法，在appendChild之前用GetChecked方法獲取要修正的checkbox/radio集合：
GetChecked: function() {
this._checked = Filter(this.tBody.getElementsByTagName("input"), function(o){
return ((isIE6 && o.type ==
"checkbox") || o.type ==
"radio") && o.checked != o.defaultChecked;
});
},

在appendChild之后用SetChecked重新設(shè)置checked值：
SetChecked: function() {
forEach(this._checked, function(o){ o.checked =
!o.defaultChecked; });
}

但這樣效率還是比較低，如果有更好的方法記得告訴我啊。


【排序?qū)ο蟆?

為了程序的更靈活，加了一個排序?qū)ο蟮臇|西。
這個排序?qū)ο笥幸韵聦傩裕?
屬性 默認(rèn)值//說明
Index: 0,//td索引
Attri: "innerHTML",//獲取數(shù)據(jù)的屬性
DataType: "string",//比較的數(shù)據(jù)類型
Desc: true,//是否按降序
Compare: null,//自定義排序函數(shù)
startSort: function(){},//排序前執(zhí)行
endSort: function(){}//排序后執(zhí)

可以看出這個排序?qū)ο缶褪怯脕肀４嬖撆判虻囊?guī)則和方式的，也就是用來告訴程序要怎么排序。
采用這個模式是因?yàn)橐粋€table通常同時需要多個不同的排序方式，使用排序?qū)ο缶拖裢嫒踹x人，哪個適合就用哪個。
而程序在一次排序過程中還可以設(shè)置多個排序?qū)ο螅粋€被KO(比較值相等)，另一個再上。
用這個方式會更方便，重用性更好。

程序中通過Creat程序來創(chuàng)建排序?qū)ο?，其參?shù)就是自定義的屬性：

Creat: function(options) {
return Extend(Extend({}, this.options), options || {});
}

執(zhí)行Sort程序就會進(jìn)行排序，但必須一個或多個的排序?qū)ο鬄閰?shù)。
在Sort程序中會先把排序?qū)ο髤?shù)轉(zhuǎn)換成數(shù)組：

var orders = Array.prototype.slice.call(arguments);

然后傳遞到Compare程序中，當(dāng)比較結(jié)果是0（即相等），同時有下一個排序?qū)ο?，就會用下一個排序?qū)ο罄^續(xù)Compare：

return !result && orders[++i] ? this.Compare(orders, i, o1, o2) : (order.Desc ? -1 : 1) * result;

這樣的方式可以最大限度的利用已建立的排序?qū)ο蟆?


使用方法

首先實(shí)例化一個主排序?qū)ο?，參?shù)是table的id：

var to = new TableOrder("idTable");

如果需要設(shè)置默認(rèn)屬性，一般建議在new的時候設(shè)置。

接著用Creat方法添加一個排序?qū)ο?，參?shù)是要設(shè)置的屬性對象（參考【排序?qū)ο蟆浚?

odID = to.Creat({ DataType: "int", Desc: false })

然后就可以用Sort方法配合排序?qū)ο鬄閰?shù)來排序了：

to.Sort(order, odID);

最新評論