jQuery: 表格排序插件

这是本人写的一个简单的表格排序插件。支持字符串和数字的排序。

代码

/*
* jtablesortable plugin for jQuery。表格排序插件
*
* @author mrwlwan#gmail.com
*/
(function($){
    // 定义可排序的数据类型，以及所对应的排序方法
    var sortFuns = {
        'default': sortDefault,
        'string': sortDefault,
        'num': sortNum,
        'date': sortDefault,
        'none': null
    };
    // 二维数组排序的默认比较函数
    function sortDefault(item1, item2){
        if(item1[1] == item2[1]){
            return 0;
        }
        if(item1[1] > item2[1]){
            return 1;
        }
        if(item1[1] < item2[1]){
            return -1;
        }
    }

    // 二维数组排序的数字比较函数
    function sortNum(item1, item2){
        item1[1] = parseFloat(item1[1]);
        item2[1] = parseFloat(item2[1]);
        return sortDefault(item1, item2);
    }

    // 表格排序函数
    function sortTable(jRows,sortFun, col, jThis){
        // 创建一临时的二维数组，元素数组的第一个元素是 jRows 行的索引，第二个元素是该行的 col 列的值
        var tempArray = [];
        for(var i=0;i<jRows.length;i++){
            tempArray.push([i, $.trim(jRows.eq(i).children('td').eq(col).text())]);
        }
        // 对 tempArray 数组进行排序
        tempArray.sort(sortFun);
        // 重排表格行
        for(var i=0;i<tempArray.length;i++){
            jRows.eq(tempArray[i][0]).appendTo(jThis);
        }
    }

    // 表格反转函数
    function reverseTable(jRows, jThis){
        $.each(jRows.get().reverse(), function(index, item){
            $(item).appendTo(jThis);
        });
    }

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

    $.fn.extend({
        // 参数是可变的
        jtablesortable: function(){
            // 取得参数数组
            var args = arguments;
            // 设置当前 this 的一个引用。用于部分函数内部
            var jThis = this;

            // 设置 tr 对象样式
            this.find('tr').css({
                cursor: 'default'
                // 设置 thead 样式
            }).eq(0).css({
                cursor: 'pointer'
                //
            }).children().each(function(index, el){
                // 将当前项的索引保存到当前项对象的数据里
                $(el).data('col', index);
                // 取得当前项的排序方式
                var sortFun = 'default';
                if(index < args.length && ($.trim(args[index]) in sortFuns)){
                    sortFun = $.trim(args[index]);
                }
                // 如果为 none，表示当前项不进行排序操作
                if(sortFun == 'none'){
                    return;
                }
                // 将当前项的排序方式保存到当前项对象的数据里
                $(el).data('sortfun', sortFun);
                // 添加图标，并且处理单击事件
                $(el).append($('<img class="itemimg000" src="bg.gif"/>')).click(function(){
                    // 取得被单击项的索引值
                    var col = $(this).data('col');
                    // 取得当前表格的所有列
                    var jRows = jThis.children('tbody').children('tr');
                    // 取出 this 对象 sortcol 里的值，并判断是否该列上次进行排序过。如果是，则直接调用表格反转函数
                    if(jThis.data('sortcol') == col){
                        // 处理图标。先对当前排序是升序还是降序当出判断
                        var desc = $(this).data('desc');
                        var sortImg = desc ? 'asc.gif' : 'desc.gif';
                        $(this).children('.itemimg000').attr('src', sortImg);
                        $(this).data('desc', !desc);
                        // 反转表格
                        reverseTable(jRows, jThis);
                        return;
                    }
                    // 处理图标
                    $(this).parent('tr').children('td, th').eq(jThis.data('sortcol')).children('.itemimg000').attr('src', 'bg.gif');
                    $(this).children('.itemimg000').attr('src', 'desc.gif');
                    // 设置当前为降序
                    $(this).data('desc', true);
                    // 将当前列的索引保存到 jThis 对象的数据里
                    jThis.data('sortcol', col);

                    // 进行排序
                    sortTable(jRows, sortFuns[$(this).data('sortfun')], col, jThis);
                });
            });
        }
    });
})(jQuery);

用法

$('#tableid').jtablesortable('default', 'num', 'string', 'date', 'num', 'none');

参数指定对应列的数据类型，插件会根据不用的数据类型选择不同的方法来进行排序。支持的类型有 default(默认的字符串排序方法)、string(字符串)、num(数字)、date(日期)。还有一个是 none，表示对应列不进行排序。

注： 某数据类型还未实现，可能在以后会跟进。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+ 。

示例

• http://wstudio.web.fc2.com/product/jtablesortable/index.html