• 微软原版系统

  • 一键重装系统

  • 纯净系统

  • 在线技术客服

魔法猪系统重装大师 一键在线制作启动 U 盘 PE 系统 用一键重装的魔法拯救失去灵魂的系统
当前位置:首页 > 教程 > 电脑教程

使用jquery对表格排序代码实例

时间:2015年04月02日 15:26:45    来源:魔法猪系统重装大师官网    人气:8637

很多高手也位jquery写了专门的排序库,因为自己也想尝试一下, 当然运行速度实在不能接受,但是我会慢慢的把他改进的。 
注:这里只是拿出了一部分代码来,查看演示demo 

文档载入后给'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-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\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'标记里面显示出来,这样是为了测试整个表格排序从排序开始到排序结束所花费的时间。 

完整代码:http://pan.baidu.com/share/link?shareid=197592&uk=85241834

使用,jquery,对,表格,排序,代码,实例,很多,高手,
栏目:电脑教程 阅读:1000 2023/12/27
Win7教程 更多>>
U盘教程 更多>>
Win10教程 更多>>
魔法猪学院 更多>>

Copyright © 2015-2023 魔法猪 魔法猪系统重装大师

本站发布的系统仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件。

在线客服 查看微信 返回顶部