>

当选表格一列并对表格排序完成原理,代码分享

- 编辑:www.bifa688.com -

当选表格一列并对表格排序完成原理,代码分享

复制代码 代码如下:

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

<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>jQuery 表格自动增加</title>
<meta name="keywords" content="jQuery, 表格, table, 自动增加" />
<meta name="description" content="jQuery表格自动增加" />
<meta name="viewport" content="width=device-width" />
<meta name="copyright" content="imsole.net" />
<meta name="designer" content="sole" />
<meta name="publisher" content="imsole.net" />
<meta name="author" content="sole" />
<meta name="robots" content="all" />
<meta name="distribution" content="global" />
<style type="text/css">
table { width:800px; margin:50px auto; border-collapse:collapse; border-spacing:0; }
table tr, table th, table td { border:1px solid #ddd; font-size:12px; }
table tr td:first-child { width:30px; text-align:center; }
table td input { width:100%; height:100%; padding:5px 0;  border:0 none; }
table td input:focus { box-shadow:1px 1px 3px #ddd inset; outline:none; }
</style>
<body>  

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

<table id="count">
 <tr><th>序号</th><th>姓名</th><th>金额[USD]</th><th>时间</th><th>项目</th><th>单位</th><th>备注</th></tr>
 <tr>
  <td>1</td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
</table>

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

<script src="" type="text/javascript"></script>

HTML代码清单

<script type="text/javascript">
$(function(){

复制代码 代码如下:

/* 这是一种方法,但是不精简,不过很好理解,就像面向过程编写代码一样。
 var oTable = $("#count"), oTr = '', oInput = '', eEle = '';
 oTable.on('mouseover', function(){
  oTr = oTable.find('tr').last();
  oInput = oTr.find('input');
  eEle = oTr.clone();
  oInput.on('click', function(){
   var parent = $(this).parents('tr');
   if(oTr.index() == parent.index()){
    oTable.append(eEle);
   }
  });
 });
*/

View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<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>

//这是第二种方法,比较精简,要看对jQ的理解了。
var oTable = $("#count"), iNum = 1, eEle = '';
oTable.on('click', function(e){
 var target = e.target,
  oTr = $(target).closest('tr');
 if(oTr.index() == oTable.find('tr').last().index()){
   iNum ;
  eEle = oTr.clone();
  eEle.find('td').eq(0).text(iNum);
 }
 oTable.append(eEle);
 });

tableSort.js代码清单:

});
</script>
 </body>
</html>

复制代码 代码如下:

运行看效果吧

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 动态生成Table表格实例代码
  • jQuery动态生成Bootstrap表格
  • JQuery Ajax动态生成Table表格
  • Jquery 动态生成表格示例代码
  • 基于jquery的动态创建表格的插件
  • JQuery右键菜单插件ContextMenu使用指南
  • jQuery右键菜单contextMenu使用实例
  • jquery实现在网页指定区域显示自定义右键菜单效果
  • jquery实现右键菜单插件
  • jQuery实现自定义右键菜单的树状菜单效果
  • jQuery实现右键菜单、遮罩等效果代码
  • jQuery动态生成表格及右键菜单功能示例

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

您可能感兴趣的文章:

  • jQuery表格排序组件-tablesorter使用示例
  • 基于jquery的表格排序
  • jquery tablesorter.js 支持中文表格排序改进
  • jQuery Ajax实现表格数据不同列标题排序(为表格注入活力)
  • jquery 表格排序、实时搜索表格内容(附图)
  • 扩展jquery实现客户端表格的分页、排序功能代码
  • jquery实现表格本地排序的方法
  • jquery.tableSort.js表格排序插件使用方法详解
  • 基于jQuery实现表格的排序
  • jQuery增加和删除表格项目及实现表格项目排序的方法
  • jQuery html表格排序插件tablesorter使用方法详解
  • jQuery实现的表格前端排序功能示例

本文由必发88官网发布,转载请注明来源:当选表格一列并对表格排序完成原理,代码分享