JavaScriptTable排序2.0(更新)_javascript技巧

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

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

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

3，按需求對數組進行排序（用數組的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);

程序說明

【排序函數】

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

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

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

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

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

【獲取比較值】

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

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

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

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的參數必須符合js的日期格式（參考這里）。
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看看下面的例子：

test

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com