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

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

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

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

HTML代码清单：

复制代码代码如下:

 
View Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> 表格排序 </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="tschengbin"> 
<meta name="Keywords" content="jquery tableSort"> 
<meta name="Description" content=""> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="tableSort.js"></script> 
<style type="text/css"> 
div{ 
width: 1024px; 
margin: 0 auto;/*div相对屏幕左右居中*/ 
} 
table{ 
border: solid 1px #666; 
border-collapse: collapse; 
width: 100%; 
cursor: default; 
} 
tr{ 
border: solid 1px #666; 
height: 30px; 
} 
table thead tr{ 
background-color: #ccc; 
} 
td{ 
border: solid 1px #666; 
} 
th{ 
border: solid 1px #666; 
text-align: center; 
cursor: pointer; 
} 
.sequence{ 
text-align: center; 
} 
.hover{ 
background-color: #3399FF; 
} 
</style> 
</head> 
<body> 
<div> 
<table id="tableSort"> 
<thead> 
<tr> 
<th type="number">序号</th> 
<th type="string">书名</th> 
<th type="number">价格（元）</th> 
<th type="string">出版时间</th> 
<th type="number">印刷量（册）</th> 
<th type="ip">IP</th> 
</tr> 
</thead> 
<tbody> 
<tr class="hover"> 
<td class="sequence">1</td> 
<td>狼图腾</td> 
<td>29.80</td> 
<td>2009-10</td> 
<td>50000</td> 
<td>192.168.1.125</td> 
</tr> 
<tr> 
<td class="sequence">2</td> 
<td>孝心不能等待</td> 
<td>29.80</td> 
<td>2009-09</td> 
<td>800</td> 
<td>192.68.1.125</td> 
</tr> 
<tr> 
<td class="sequence">3</td> 
<td>藏地密码2</td> 
<td>28.00</td> 
<td>2008-10</td> 
<td></td> 
<td>192.102.0.12</td> 
</tr> 
<tr> 
<td class="sequence">4</td> 
<td>藏地密码1</td> 
<td>24.80</td> 
<td>2008-10</td> 
<td></td> 
<td>215.34.126.10</td> 
</tr> 
<tr> 
<td class="sequence">5</td> 
<td>设计模式之禅</td> 
<td>69.00</td> 
<td>2011-12</td> 
<td></td> 
<td>192.168.1.5</td> 
</tr> 
<tr> 
<td class="sequence">6</td> 
<td>轻量级 Java EE 企业应用实战</td> 
<td>99.00</td> 
<td>2012-04</td> 
<td>5000</td> 
<td>192.358.1.125</td> 
</tr> 
<tr> 
<td class="sequence">7</td> 
<td>Java 开发实战经典</td> 
<td>79.80</td> 
<td>2012-01</td> 
<td>2000</td> 
<td>192.168.1.25</td> 
</tr> 
<tr> 
<td class="sequence" onclick="sortArray()">8</td> 
<td>Java Web 开发实战经典</td> 
<td>69.80</td> 
<td>2011-11</td> 
<td>2500</td> 
<td>215.168.54.125</td> 
</tr> 
</tbody> 
</table> 
</div> 
</body> 
</html> 

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 < len; i++){ 
type = trsValue[i].split(".separator")[0]; 
for(var j = i + 1; j < len; 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 < len; 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; 
} 
}) 

运行结果：

特别感谢网友“夏の寒风”，在Jquery的相关操作上要是没有“夏の寒风”的帮忙肯定很难完成。对这个效果自己还是很满意的，只是在实现的操作上拼接字符串，截取字符串的过程有些繁琐，不够简单明了，还有待改进。

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

相关推荐