这是本人写的一个简单的表格排序插件。支持字符串和数字的排序。
代码
/*
* 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+ 。
