JS對表格排序(支持對序號，數字，字母，日期)

JS對表格排序(支持對序號，數字，字母，日期)

      前不久看到淘寶組件有"對表格排序的插件" 如想要看 可以看這個地址 http://gallery.kissyui.com/KSortTable/1.0/demo/index.html 但是看了下他們的JS源碼 有點復雜 所以自己試着寫了一個簡單點的，同樣也能實現相應的功能，且相對於他們來講 多添加了一個"按日期排序的功能" , 目前對日期的格式 支持兩種格式：一種是2013/12/29 另外一種是:2013-12-29 。其他的日期未做處理，其實對表格排序 特別對字母排序剛開始有點糾結，看了下kissy組件源碼 感覺他們那樣處理有點復雜 所以自己也是google下 發下JS有一種方法可以比較本地的字母的方法 ----- localeCompare。

 什么是localeCompare？

   根據官方定義： 確定兩個字符串在當前區域設置中是否相等。(當然字母可以轉換成字符串進行比較)。

 語法如下：

      stringVar.localeCompare(stringExp[, locales][, options]) 。

stringVar

必需。 要比較的第一個字符串。 這可能是 String 對象或字符串文本。

stringExp

必需。 要比較的第二個字符串。

locales

可選。 包含一種或多種語言或區域設置標記的區域設置字符串數組。 如果包含多個區域設置字符串，請以降序優先級對它們進行排列，確保首個條目為首選區域位置。 如果省略此參數，則使用 JavaScript 運行時的默認區域設置。 

options

可選。 包含指定比較選項的一個或多個特性的對象。

 下面可以先來看看效果吧！

     

 表格排序的原理?

   還是用上一篇文章的方法 用圖來解釋 更明白點 如下：

  

思路如上面所示：

 HTML代碼 css代碼 我是直接把淘寶的結構和css樣式拿過來用的 其實HTML+CSS對於前端或者后端來說 沒有什么 只是以什么樣的顯示而已 沒有其他什么的  至於JS的邏輯 就是上面的圖表解釋的那個邏輯。我會在下面提供demo源碼 大家可以下載下看看。

所以在這里 也不貼HTML代碼和CSS代碼了 直接貼下JS代碼 不過會提供Demo源碼下載 有興趣的同學可以看看！

JS代碼如下：

/**
 * JS對表格排序(支持按序號,日期，字母，數字排序)。
 * @constructor {KSortTable} 
 * @date 2013-12-26
 * @author tugenhua
 * @email [e-mail]
 */

 function KSortTable(options) {
    
    this.config = {
        tableElem              :  '.J_table',       //表格容器
        sortableElem           :  '.sortable',      // 點擊對象
        callback               :  null              // 排序好后的回調函數
    };

    this.cache = {
        trArrs       : []             // 存放tbody下的所有tr
    };

    this.init(options);
 }

 KSortTable.prototype = {
    constructor : KSortTable,
    init: function(options){
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        $(_config.sortableElem).each(function(index,item){
            
            $(item).unbind('click');
            $(item).bind('click',function(e){
                var tagParent = $(this).closest(_config.tableElem),
                    tagAttr = $(this).attr("data-sorttable");

                // 判斷table元素是否有屬性 data-sorttable = 'true' 沒有的話 不做任何事情
                if($(tagParent).attr('data-sorttable') == 'true') {
                    self._curStyle($(this));
                    var index = $(_config.sortableElem,tagParent).index($(this));
                
                    // 排序函數
                    self._sortMethod(index,tagAttr,tagParent,$(this));
                }
            });
        });
    },
    /*
     * 點擊對當前添加樣式
     */
    _curStyle: function(item) {
        var self = this;
        !$(item).hasClass('st-active') && $(item).addClass("st-active").siblings().removeClass("st-active");
        if(!$(item).hasClass('data-reverse')) {
            $(item).addClass('data-reverse');
        }else {
            $(item).removeClass('data-reverse');
        }
    },
    /*
     * 排序方法 做了type的判斷 
     * 目前暫支持 數字 字符串 日期的比較
     */
    _sortMethod: function(index,tagAttr,tagParent,tagElem) {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        var tbody = $(tagParent)[0].tBodies[0];
        for(var i = 0, ilen = tbody.rows.length; i < ilen; i++) {
            _cache.trArrs[i] = tbody.rows[i];
        }
        if(tagAttr == 'number') {
            _cache.trArrs.sort(function (td1, td2){
                if($(tagElem).hasClass('data-reverse')) {
                    return td1.cells[index].innerHTML - td2.cells[index].innerHTML;
                }else {
                    return td2.cells[index].innerHTML - td1.cells[index].innerHTML
                }
            });
        }else if(tagAttr == 'string') {
            _cache.trArrs.sort(function(td1,td2){
                var str1 = td1.cells[index].innerHTML,
                    str2 = td2.cells[index].innerHTML;

                if($(tagElem).hasClass('data-reverse')) {
                    return str1.localeCompare(str2);
                }else {
                    return str2.localeCompare(str1);
                }    
            });
        }else if(tagAttr == 'date') {
            _cache.trArrs.sort(function (td1, td2){
                var str1 = td1.cells[index].innerHTML,
                    str2 = td2.cells[index].innerHTML;
                
                if($(tagElem).hasClass('data-reverse')) {
                    return Date.parse(str1.replace(/-/g,'/')) - Date.parse(str2.replace(/-/g,'/'));
                }else {
                    return Date.parse(str2.replace(/-/g,'/')) - Date.parse(str1.replace(/-/g,'/'));
                }
            });    
        }

        //把排序后的tr 重新插入tbody
        for(var j =0; j < _cache.trArrs.length; j++ ) {
            tbody.appendChild(_cache.trArrs[j]);
        }
        // 排序完 回調
        _config.callback && $.isFunction(_config.callback) && _config.callback();
    }
 };

/* JS初始化 */
$(function(){
    new KSortTable({});
});

Demo下載