在前端对表格排序的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代码清单:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> 表格排序 </title> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content="tschengbin"> 7 <meta name="Keywords" content="jquery tableSort"> 8 <meta name="Description" content=""> 9 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 10 <script type="text/javascript" src="tableSort.js"></script> 11 <style type="text/css"> 12 div{ 13 width: 1024px; 14 margin: 0 auto;/*div相对屏幕左右居中*/ 15 } 16 table{ 17 border: solid 1px #666; 18 border-collapse: collapse; 19 width: 100%; 20 cursor: default; 21 } 22 tr{ 23 border: solid 1px #666; 24 height: 30px; 25 } 26 table thead tr{ 27 background-color: #ccc; 28 } 29 td{ 30 border: solid 1px #666; 31 } 32 th{ 33 border: solid 1px #666; 34 text-align: center; 35 cursor: pointer; 36 } 37 .sequence{ 38 text-align: center; 39 } 40 .hover{ 41 background-color: #3399FF; 42 } 43 </style> 44 </head> 45 46 <body> 47 <div> 48 <table id="tableSort"> 49 <thead> 50 <tr> 51 <th type="number">序号</th> 52 <th type="string">书名</th> 53 <th type="number">价格(元)</th> 54 <th type="string">出版时间</th> 55 <th type="number">印刷量(册)</th> 56 <th type="ip">IP</th> 57 </tr> 58 </thead> 59 <tbody> 60 <tr class="hover"> 61 <td class="sequence">1</td> 62 <td>狼图腾</td> 63 <td>29.80</td> 64 <td>2009-10</td> 65 <td>50000</td> 66 <td>192.168.1.125</td> 67 </tr> 68 <tr> 69 <td class="sequence">2</td> 70 <td>孝心不能等待</td> 71 <td>29.80</td> 72 <td>2009-09</td> 73 <td>800</td> 74 <td>192.68.1.125</td> 75 </tr> 76 <tr> 77 <td class="sequence">3</td> 78 <td>藏地密码2</td> 79 <td>28.00</td> 80 <td>2008-10</td> 81 <td></td> 82 <td>192.102.0.12</td> 83 </tr> 84 <tr> 85 <td class="sequence">4</td> 86 <td>藏地密码1</td> 87 <td>24.80</td> 88 <td>2008-10</td> 89 <td></td> 90 <td>215.34.126.10</td> 91 </tr> 92 <tr> 93 <td class="sequence">5</td> 94 <td>设计模式之禅</td> 95 <td>69.00</td> 96 <td>2011-12</td> 97 <td></td> 98 <td>192.168.1.5</td> 99 </tr> 100 <tr> 101 <td class="sequence">6</td> 102 <td>轻量级 Java EE 企业应用实战</td> 103 <td>99.00</td> 104 <td>2012-04</td> 105 <td>5000</td> 106 <td>192.358.1.125</td> 107 </tr> 108 <tr> 109 <td class="sequence">7</td> 110 <td>Java 开发实战经典</td> 111 <td>79.80</td> 112 <td>2012-01</td> 113 <td>2000</td> 114 <td>192.168.1.25</td> 115 </tr> 116 <tr> 117 <td class="sequence" onclick="sortArray()">8</td> 118 <td>Java Web 开发实战经典</td> 119 <td>69.80</td> 120 <td>2011-11</td> 121 <td>2500</td> 122 <td>215.168.54.125</td> 123 </tr> 124 </tbody> 125 </table> 126 </div> 127 </body> 128 </html>
tableSort.js代码清单:
1 $(document).ready(function(){ 2 var tableObject = $('#tableSort');//获取id为tableSort的table对象 3 var tbHead = tableObject.children('thead');//获取table对象下的thead 4 var tbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th 5 var tbBody = tableObject.children('tbody');//获取table对象下的tbody 6 var tbBodyTr = tbBody.find('tr');//获取tbody下的tr 7 8 var sortIndex = -1; 9 10 tbHeadTh.each(function() {//遍历thead的tr下的th 11 var thisIndex = tbHeadTh.index($(this));//获取th所在的列号 12 13 $(this).mouseover(function(){ 14 tbBodyTr.each(function(){//编列tbody下的tr 15 var tds = $(this).find("td");//获取列号为参数index的td对象集合 16 $(tds[thisIndex]).addClass("hover"); 17 }); 18 }).mouseout(function(){ 19 tbBodyTr.each(function(){ 20 var tds = $(this).find("td"); 21 $(tds[thisIndex]).removeClass("hover"); 22 }); 23 }); 24 25 $(this).click(function() { 26 var dataType = $(this).attr("type"); 27 checkColumnValue(thisIndex, dataType); 28 }); 29 }); 30 31 $("tbody tr").removeClass();//先移除tbody下tr的所有css类 32 33 $("tbody tr").mouseover(function(){ 34 $(this).addClass("hover"); 35 }).mouseout(function(){ 36 $(this).removeClass("hover"); 37 }); 38 39 //对表格排序 40 function checkColumnValue(index, type) { 41 var trsValue = new Array(); 42 43 tbBodyTr.each(function() { 44 var tds = $(this).find('td'); 45 trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html()); 46 $(this).html(""); 47 }); 48 49 var len = trsValue.length; 50 51 if(index == sortIndex){ 52 trsValue.reverse(); 53 } else { 54 for(var i = 0; i < len; i++){ 55 type = trsValue[i].split(".separator")[0]; 56 for(var j = i + 1; j < len; j++){ 57 value1 = trsValue[i].split(".separator")[1]; 58 value2 = trsValue[j].split(".separator")[1]; 59 if(type == "number"){ 60 value1 = value1 == "" ? 0 : value1; 61 value2 = value2 == "" ? 0 : value2; 62 if(parseFloat(value1) > parseFloat(value2)){ 63 var temp = trsValue[j]; 64 trsValue[j] = trsValue[i]; 65 trsValue[i] = temp; 66 } 67 } else if(type == "ip"){ 68 if(ip2int(value1) > ip2int(value2)){ 69 var temp = trsValue[j]; 70 trsValue[j] = trsValue[i]; 71 trsValue[i] = temp; 72 } 73 } else { 74 if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器 75 var temp = trsValue[j]; 76 trsValue[j] = trsValue[i]; 77 trsValue[i] = temp; 78 } 79 } 80 } 81 } 82 } 83 84 for(var i = 0; i < len; i++){ 85 $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]); 86 } 87 88 sortIndex = index; 89 } 90 91 //IP转成整型 92 function ip2int(ip){ 93 var num = 0; 94 ip = ip.split("."); 95 num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); 96 return num; 97 } 98 99 })
运行结果:
排序前
排序后
特别感谢网友“夏の寒风”,在Jquery的相关操作上要是没有“夏の寒风”的帮忙肯定很难完成。对这个效果自己还是很满意的,只是在实现的操作上拼接字符串,截取字符串的过程有些繁琐,不够简单明了,还有待改进。