Jquery 选中表格一列并对表格排序实现原理_jquery

程序员文章站 2022-05-07 18:50:02

...

在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。

为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。

该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个中的html，同时获取每个标签下对应获取到的列号的标签中的内容，并取得标签的type属性值，将获取的html、的内容和的type属性值拼接成字符串添加到数组array中，然后将表格中的html全部置空，根据type属性值的不同采用不同的方法对的内容进行比较，根据比较结果对数组array进行排序，然后将排序后的数组元素重新赋值给已经置空的。如果已经对该列排序过了，则直接对数组进行倒置。提供数值、字符串以及IP地址三种类型的排序规则。字符串类型排序规则采用javascript的localeCompare方法，该方法支持汉字字符串的排序，遗憾的是该方法不兼容谷歌浏览器。所以在谷歌浏览器上汉字字符串的排序结果会不正确。

HTML代码清单：

复制代码代码如下:

View Code 

 表格排序 

序号 书名 价格（元） 出版时间 印刷量（册） IP 

狼图腾 29.80 2009-10 50000 192.168.1.125 

孝心不能等待 29.80 2009-09 800 192.68.1.125 

藏地密码2 28.00 2008-10  192.102.0.12 

藏地密码1 24.80 2008-10  215.34.126.10 

设计模式之禅 69.00 2011-12  192.168.1.5 

轻量级 Java EE 企业应用实战 99.00 2012-04 5000 192.358.1.125 

Java 开发实战经典 79.80 2012-01 2000 192.168.1.25 

Java Web 开发实战经典 69.80 2011-11 2500 215.168.54.125

序号	书名	价格（元）	出版时间	印刷量（册）	IP
1	狼图腾	29.80	2009-10	50000	192.168.1.125
2	孝心不能等待	29.80	2009-09	800	192.68.1.125
3	藏地密码2	28.00	2008-10		192.102.0.12
4	藏地密码1	24.80	2008-10		215.34.126.10
5	设计模式之禅	69.00	2011-12		192.168.1.5
6	轻量级 Java EE 企业应用实战	99.00	2012-04	5000	192.358.1.125
7	Java 开发实战经典	79.80	2012-01	2000	192.168.1.25
8	Java Web 开发实战经典	69.80	2011-11	2500	215.168.54.125

tableSort.js代码清单：

复制代码代码如下:

 
View Code 
$(document).ready(function(){ 
var tableObject = $('#tableSort');//获取id为tableSort的table对象 
var tbHead = tableObject.children('thead');//获取table对象下的thead 
var tbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th 
var tbBody = tableObject.children('tbody');//获取table对象下的tbody 
var tbBodyTr = tbBody.find('tr');//获取tbody下的tr 
var sortIndex = -1; 
tbHeadTh.each(function() {//遍历thead的tr下的th 
var thisIndex = tbHeadTh.index($(this));//获取th所在的列号 
$(this).mouseover(function(){ 
tbBodyTr.each(function(){//编列tbody下的tr 
var tds = $(this).find("td");//获取列号为参数index的td对象集合 
$(tds[thisIndex]).addClass("hover"); 
}); 
}).mouseout(function(){ 
tbBodyTr.each(function(){ 
var tds = $(this).find("td"); 
$(tds[thisIndex]).removeClass("hover"); 
}); 
}); 
$(this).click(function() { 
var dataType = $(this).attr("type"); 
checkColumnValue(thisIndex, dataType); 
}); 
}); 
$("tbody tr").removeClass();//先移除tbody下tr的所有css类 
$("tbody tr").mouseover(function(){ 
$(this).addClass("hover"); 
}).mouseout(function(){ 
$(this).removeClass("hover"); 
}); 
//对表格排序 
function checkColumnValue(index, type) { 
var trsValue = new Array(); 
tbBodyTr.each(function() { 
var tds = $(this).find('td'); 
trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html()); 
$(this).html(""); 
}); 
var len = trsValue.length; 
if(index == sortIndex){ 
trsValue.reverse(); 
} else { 
for(var i = 0; i type = trsValue[i].split(".separator")[0]; 
for(var j = i + 1; j value1 = trsValue[i].split(".separator")[1]; 
value2 = trsValue[j].split(".separator")[1]; 
if(type == "number"){ 
value1 = value1 == "" ? 0 : value1; 
value2 = value2 == "" ? 0 : value2; 
if(parseFloat(value1) > parseFloat(value2)){ 
var temp = trsValue[j]; 
trsValue[j] = trsValue[i]; 
trsValue[i] = temp; 
} 
} else if(type == "ip"){ 
if(ip2int(value1) > ip2int(value2)){ 
var temp = trsValue[j]; 
trsValue[j] = trsValue[i]; 
trsValue[i] = temp; 
} 
} else { 
if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器 
var temp = trsValue[j]; 
trsValue[j] = trsValue[i]; 
trsValue[i] = temp; 
} 
} 
} 
} 
} 
for(var i = 0; i $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]); 
} 
sortIndex = index; 
} 
//IP转成整型 
function ip2int(ip){ 
var num = 0; 
ip = ip.split("."); 
num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); 
return num; 
} 
}) 