当前位置:  编程技术>jquery

jquery 表格排序实例详解

    来源: 互联网  发布时间:2014-09-03

    本文导语:  文档载入后给'th'添加click事件。 1.   代码示例: $('th').click(function(){ var date1=(new Date()).getTime() var dataType=$(this).attr('dataType'); 找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,也可以用ID或者...

文档载入后给'th'添加click事件。
1.
 

代码示例:
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');


找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,也可以用ID或者class来定义,但是我觉得这样直观点在Transitional模式下也可以正常解读.
2.
 

代码示例:
var index=$('th').index(this)+1;
 

找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。
因为用:eq()只能得到td的全文档位置,而用:nth-child()的话得到的是每个td在自己的父元素里面的序列位置。
3.
 

代码示例:
var row=$('tbody tr');

将tbody里所有tr存到变量row.
4.
 

代码示例:
$.each(row,function(i){ arr[i]=row[i] })

遍历所有行讲它插入arr数组.

5.

代码示例:
if($(this).hasClass('select')){arr.reverse()}
 

如果这个'th'被点击过那么它将会被添加select样式,如果是这样直接将原来的arr数组反向。
6.
 

代码示例:
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
 

否则,将arr用sort()方法进行排序sort()方式可以接受1个函数,这个函数接受2个参数作为需要比较的数据,我在这里定义为
sortStr();
它有两个参数:
 

代码示例:

function sortStr(index,dataType){
return function(a,b){
var aText=$(a).find('td:nth-child('+index+')').text();
var bText=$(b).find('td:nth-child('+index+')').text();

if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;

}
else return aText.localeCompare(bText)
}
}

第一个是index,它是在click事件中获得的变量,这个变量包含了被点击的那个'th'的在文档中的位置是一个数字,
jquert的index()方法获得对象的位置,这个位置从0算起,这个例子中有6个'th';

第二个参数是dataType,他包含每个'th'的属性值。

sortStr()里面包含了一个比较的函数,这个函数是匿名函数,它有2个参数每个参数代表着一个'tbody tr',(在这里a和b代表需要比较的tr)这两个参数是在包含他的函数环境中获取的,sort()方法里面的参数,在这是一个函数,这个函数都会获得数组对象的元素,
这个匿名函数返回对操作数组的引用。
arr里面包含的一个数组,每个数组的值包含对tbody里面的tr的引用,排序函数按照返回的值对原有数组里面的元素直接进行位置的改变,

var aText=$(a).find('td:nth-child('+index+')').text();
获取需要比较的行里面其中一个td里面包含的文本这个就是需要比较的值,
click事件中得到的index变量成为参数传递到这里就是为了得到th所对应的td的位置;
 

代码示例:
if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;
}

如果需要排序的类型是不包含了数字和字母的话,(因为拥有roomType值的元素所包含了数字和字母),将获得的td里面的文本值和dataType传递到
Parse()里面进行转换,
 

代码示例:
function Parse(data,dataType){
switch(dataType){
case 'num':
return parseFloat(data)||0
case 'date':
return Date.parse(data)||0
default :
return splitStr(data)
}
}

如果是数字类型直接转换为浮点数,return parseFloat(data)||0
要是出现了布恩那个转换的对象字符串那么返回0;因为这个文档里面有一个NaN这个是无法转换的,所以返回的是0;

如果是日期类型可以用Date.parse直接转换为数字,这个转换是从1970年到转换参数的时间,
这个时间转换我试了试可以精确到秒的,比如说1971/01/2 18:12:20、01/2/1970 18:12:20写法都可以转换;
之后:return aText>;bText?-1:bText>;aText?1:0;
返回比较值aText比bText大返回一个小于0的任何数字都可以,相反返回一个正数,如果都不是的话返回0;如果不是日期也不是数字(在这个文档中目前只能转换3中数据:1.日期。2.数字。3.字符串和数字一起的),
default :
return splitStr(data)
我把他放到splitStr()里面进行转换

splitStr()的内容:
 

代码示例:
function splitStr(data){
var re=/^[$a-zA-zu4e00-u9fa5 ]*(.*?)[a-zA-zu4e00-u9fa5 ]*$/
data=data.replace(re,'$1')
return parseFloat(data)
}

正则表达式:分为三部分 1部分^[a-zA-Z ]*;中间部分(.*?);结尾部分[a-zA-Z ]*$
可以这样看/ /是包含块 ,
第一部分 ^表示目标字符串开头,[]之间表示A-Z无论大小写都被忽略掉,里面还有个空格,*表示它左边[]里面的内容可以出现任意次数;
中间部分 ()是个分组 ,分组内容会被放置到RegExp的第一项中'$1′,'.'匹配所有(除了空格)*?懒惰方式;
最后部分 []之间与后面的*和第一部分是一样的都是去掉字母,$表示结尾部分;
$表示匹配$号
代码:
 

代码示例:
function sortStr(index,dataType){
return function(a,b){
var aText=$(a).find('td:nth-child('+index+')').text();
var bText=$(b).find('td:nth-child('+index+')').text();
if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;
}
else return aText.localeCompare(bText)
}
}

否则 直接使用localeCompare进行比较,这个是专门对字符串进行比较的方法,如:字符串'a'比字符串'b'排在26的单词的前面;返回的依然是大于0的数,负数和0;

代码最开头部分的 new Date和结束部分的new Date是计算表格排序时间的,这个时间会在最中间那个'th'的'span'标记里面显示出来,这样是为了测试整个表格排序从排序开始到排序结束所花费的时间。

完整的代码:
 

代码示例:





表格排序-www.

$(function(){
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');
var index=$('th').index(this)+1;
var arr=[];
var row=$('tbody tr');
$.each(row,function(i){ arr[i]=row[i] })
if($(this).hasClass('select')){
arr.reverse()
}
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
var fragment=document.createDocumentFragment()
$.each(arr,function(i){
fragment.appendChild(arr[i])
})
// $('tbody').remove();
//$('table').append('')
//Each(arr,function(o){fragment.appendChild(o)})
$('tbody').append(fragment)
var date2=(new Date()).getTime()
$('th span').text(date2-date1)
})
})

function sortStr(index,dataType){
return function(a,b){
var aText=$(a).find('td:nth-child('+index+')').text();
var bText=$(b).find('td:nth-child('+index+')').text();

if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText=Parse(bText,dataType)
return aText>bText?-1:bText>aText?1:0;
}
else return aText.localeCompare(bText)
}
}
function Parse(data,dataType){
switch(dataType){
case 'num':
return parseFloat(data)||0
case 'date':
return Date.parse(data)||0
default :
return splitStr(data)
}
}
function splitStr(data){
var re=/^[$a-zA-zu4e00-u9fa5 ]*(.*?)[a-zA-zu4e00-u9fa5 ]*$/
data=data.replace(re,'$1')
return parseFloat(data)
}

table {
text-align:center;
border:1px #ccc solid;
border-collapse:collapse;
width:700px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#666;
}
tr {
border-bottom:1px #ccc solid;
}
td {
padding:.3em 0 .3em 0;
}
th {
cursor:pointer;
background:url(/blog_article/room-bg.gif) 0 -13px repeat-x;
height:30px;
color:#009;
}
td.select {
color:#000;
}
th.select {
background-image:none;
background-color:#C4D5D9;
}
span {
}



返回文章


房号
日期
房间类型
床位
容量
价格/晚
合计




u0628
9/14/2008
Std Hotel Room 2 Double (27 left)
2
4 人
$109.00
$436.00


u0631
10/4/2008
Lodge Rm/Shared Bath Q (4 left)
1
2 人
$109.00
$436.00


u0636
9/18/2008
Std Hotel Room Q (34 left)
1
2 人
$117.00
$466.00


u0638
9/19/2008
Std Hotel Room 2 Q (28 left)
2
4 人
$117.00
$466.00


u0612
9/1/2008
Studio Condo (10 left)
1
4 人
$149.00
$596.00


u0626
9/13/2008
Hotel Jr Suite K (4 left)
1
2 人
$149.00
$596.00


u0641
9/22/2008
Hotel Superior K (26 left)
1
2 人
$149.00
$596.00


u0602
8/31/2008
1 Bdrm Condo K (96 left)
1
4 人
$169.00
$676.00


u0616
10/8/2008
Studio Condo Murphy (5 left)
NaN
4 人
$169.00
$676.00


u0623
10/2/2008
Studio Cabin Q (6 left)
1
2 人
$169.00
$676.00


u0633
9/16/2008
Studio Q/Murphy (6 left)
2
4 人
$169.00
$676.00


u0637
10/5/2008
Lodge Room Q (4 left)
1
2 人
$169.00
$676.00


u0622
9/11/2008
Hotel Loft Ste K/Q (3 left)
2
4 人
$179.00
$716.00


u0629
10/10/2008
1 Bdrm Condo K (76 left)
1
4 人
$179.00
$716.00


u0603
9/8/2008
Hotel Loft K/Q (16 left)
2
4 人
$189.00
$756.00


u0632
9/15/2008
Hotel Loft K/2T (15 left)
3
4 人
$189.00
$756.00


u0619
10/1/2008
Studio Cabin Firepl K (6 left)
1
2 人
$209.00
$836.00


u0608
10/7/2008
1 Bdrm Condo with Den K (1 left)
1
6 人
$222.00
$886.00


u0620
9/5/2008
2 Bdrm Condo K/K (25 left)
2
6 人
$229.00
$916.00


u0630
9/7/2008
2 Bdrm Condo K/2T (57 left)
3
6 人
$229.00
$916.00


u0634
10/11/2008
2 Bdrm Condo K/Q (88 left)
2
6 人
$229.00
$916.00


u0639
9/20/2008
1 Bdrm K/Murphy (19 left)
2
4 人
$229.00
$916.00


u0614
9/2/2008
2 Bdrm Townhome (7 left)
2
4 人
$239.00
$956.00


u0610
9/10/2008
1 Bdrm Loft K/Q+2T/Murphy (5 left)
5
8 人
$269.00
$1076.00


u0625
9/12/2008
2 Bdrm K/Q/Murphy (6 left)
3
6 人
$269.00
$1076.00


u0640
9/21/2008
Exec. 2 Bdrm K/2Q/Murphy (2 left)
4
8 人
$269.00
$1076.00


u0606
9/26/2008
2 Bdrm Cabin K/Q+T (2 left)
3
5 人
$279.00
$1116.00


u0613
9/29/2008
Lodge 2 Bdrm Suite Q/Q (1 left)
2
4 人
$279.00
$1116.00


u0624
10/3/2008
1 Bdrm Cabin Firepl K (3 left)
1
4 人
$279.00
$1116.00


u0618
9/4/2008
2 Bdrm Condo w/Den Custom (1 left)
2
6 人
$329.00
$1316.00


u0627
10/9/2008
3 Bdrm Condo K/Q/Q (6 left)
3
8 人
$339.00
$1356.00


u0642
9/23/2008
2 Bdrm Cabin Firepl K/Q+T (1 left)
3
7 人
$339.00
$1356.00


u0615
9/3/2008
3 Bdrm Condo K/Q/2T (2 left)
4
8 人
$379.00
$1516.00


u0607
9/9/2008
2 Bdrm. Loft K/Q/Q,3T/SS (9 left)
6
11 人
$389.00
$1556.00


u0609
9/27/2008
Dlx 1 Bdrm Cabin Firepl K (3 left)
1
4 人
$389.00
$1556.00


u0635
9/17/2008
Exec 2 Bdrm Lft K/K/2Q/SS (1 left)
4
10 人
$399.00
$1596.00


u0621
9/6/2008
3 Bdrm Townhome (3 left)
3
6 人
$409.00
$1636.00


u0601
9/24/2008
3 Bdrm Cabin K/Q+T/2T (1 left)
5
9 人
$469.00
$1876.00


u0605
9/25/2008
Dlx 1Bd Loft,K,Q/T firepl (1 left)
3
6 人
$469.00
$1876.00


u0611
9/28/2008
Dlx 2 Bdm Cbn Firepl K/2T (3 left)
2
6 人
$469.00
$1876.00


u0604
10/6/2008
Deluxe 3 Bdrm Condo K/Q/Q (2 left)
3
8 人
$499.00
$1996.00


u0617
9/30/2008
Dlx3Bdm/2Bth/FP/K/QT/QT (1 left)
5
8 人
$549.00
$2196.00





    
 
 

您可能感兴趣的文章:

  • jQuery - css() 方法示例详解
  • jquery EasyUI导入js顺序详解
  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
  • jQuery focus和blur事件的应用详解
  • jquery操作select详解(取值,设置选中)
  • Jquery中"$(document).ready(function(){ })"函数的使用详解
  • Jquery性能优化详解
  • jQuery插件开发的两种方法及$.fn.extend的详解
  • Jquery遍历修改url请求参数的代码详解
  • jquery选择器之内容过滤选择器详解
  • JQuery动画animate的stop方法使用详解
  • jquery判断浏览器类型实例详解
  • jquery操作css样式表文件的方法详解
  • Jquery中$命名冲突问题详解
  • 详解jquery的substring,substr,split的用法
  • jquery中each的用法详解
  • jQuery.extend 函数的用法详解
  • jQuery之ajax删除详解
  • jquery与直接写JS的区别详解
  • jquery移除、绑定、触发元素事件使用示例详解
  • jQuery表格插件 Flexigrid for jQuery
  • jQuery电子表格插件 jQuery.sheet
  • jQuery电子表格插件 JQuery.Spreadsheet UI
  • JQuery实现动态表格点击按钮表格增加一行
  • jQuery 数据表格插件 jqxGrid
  • jQuery表格插件 jQuery grid view plugin
  • jQuery表格插件 DataTables
  • jQuery表格插件 ayGrid
  • jQuery表格插件 MagicGrid
  • jQuery如何获取表格总行数
  • jQuery 表格插件 cGrid
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • jquery等宽输出文字插件的实例代码
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  • jquery获得表单所有数据的实例分享
  • jQuery回车键事件实例代码
  • Jquery 键盘按键监听与滑动效果的实例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jquery导航固定效果实例
  • jquery 延迟执行的实例分享
  • JQuery validate日期比较实例
  • Jquery如何获取新浪天气预报?实例代码
  • jquery 网页自动播放声音实例
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3