来自 新葡亰服务器 2019-11-27 16:48 的文章
当前位置: 澳门新葡亰app > 新葡亰服务器 > 正文

报表排序

很多高手也位jquery写了专门的排序库,因为自己也想尝试一下, 当然运行速度实在不能接受,但是我会慢慢的把他改进的。 注:这里只是拿出了一部分代码来,查看演示demo 文档载入后给'th'添加click事件。 1. $.click{ var date1= var dataType=$.attr; 找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,也可以用ID或者class来定义,但是我觉得这样直观点在Transitional模式下也可以正常解读.

  1. var index=$+1; 找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。 因为用:eq()只能得到td的全文档位置,而用:nth-child()的话得到的是每个td在自己的父元素里面的序列位置。
  2. var row=$; 将tbody里所有tr存到变量row. 4. $.each{ arr[i]=row[i] }) 遍历所有行讲它插入arr数组. 5.if.hasClass{arr.reverse()} 如果这个'th'被点击过那么它将会被添加select样式,如果是这样直接将原来的arr数组反向。
  3. else { arr.sort(sortStr $.removeClass(); $('td:nth-child.addClass.addClass } 否则,将arr用sort方式可以接受1个函数,这个函数接受2个参数作为需要比较的数据,我在这里定义为 sortStr(); 它有两个参数: 复制代码 代码如下: function sortStr{ return function.find('td:nth-child; var bText=$.find('td:nth-child; if{ aText=Parse bText=Parse return aText>;bText?-1:bText>;aText?1:0; } else return aText.localeCompare } } 第一个是index,它是在click事件中获得的变量,这个变量包含了被点击的那个'th'的在文档中的位置是一个数字, jquert的index()方法获得对象的位置,这个位置从0算起,这个例子中有6个'th'; 第二个参数是dataType,他包含每个'th'的属性值。 sortStr()里面包含了一个比较的函数,这个函数是匿名函数,它有2个参数每个参数代表着一个'tbody tr',这两个参数是在包含他的函数环境中获取的,sort()方法里面的参数,在这是一个函数,这个函数都会获得数组对象的元素, 这个匿名函数返回对操作数组的引用。 arr里面包含的一个数组,每个数组的值包含对tbody里面的tr的引用,排序函数按照返回的值对原有数组里面的元素直接进行位置的改变, var aText=$.find('td:nth-child; 获取需要比较的行里面其中一个td里面包含的文本这个就是需要比较的值, click事件中得到的index变量成为参数传递到这里就是为了得到th所对应的td的位置; 复制代码 代码如下: if{ aText=Parse bText=Parse return aText>;bText?-1:bText>;aText?1:0; } 如果需要排序的类型是不包含了数字和字母的话,(因为拥有roomType值的元素所包含了数字和字母),将获得的td里面的文本值和dataType传递到 Parse()里面进行转换, 复制代码 代码如下: function Parse{ switch{ case 'num': return parseFloat||0 case 'date': return Date.parse||0 default : return splitStr } } 如果是数字类型直接转换为浮点数, return parseFloat||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里面进行转换 splitStr()的内容如下: 复制代码 代码如下: function splitStr{ var re=/^[$a-zA-zu4e00-u9fa5 ]*[a-zA-zu4e00-u9fa5 ]*$/ data=data.replace return parseFloat } 正则表达式:分为三部分 1部分^[a-zA-Z ]*;中间部分;结尾部分[a-zA-Z ]*$ 可以这样看/ /是包含块 , 第一部分 ^表示目标字符串开头,[]之间表示A-Z无论大小写都被忽略掉,里面还有个空格,*表示它左边[]里面的内容可以出现任意次数; 中间部分 ()是个分组 ,分组内容会被放置到RegExp的第一项中'$1′,'.'匹配所有*?懒惰方式; 最后部分 []之间与后面的*和第一部分是一样的都是去掉字母,$表示结尾部分; $表示匹配$号 复制代码 代码如下: function sortStr{ return function.find('td:nth-child; var bText=$.find('td:nth-child; if{ aText=Parse bText=Parse return aText>;bText?-1:bText>;aText?1:0; } else return aText.localeCompare } } 否则 直接使用localeCompare进行比较,这个是专门对字符串进行比较的方法,如:字符串'a'比字符串'b'排在26的单词的前面;返回的依然是大于0的数,负数和0; 代码最开头部分的 new Date和结束部分的new Date是计算表格排序时间的,这个时间会在最中间那个'th'的'span'标记里面显示出来,这样是为了测试整个表格排序从排序开始到排序结束所花费的时间。 完整的代码:复制代码 代码如下:

表格排序

返回文章

房号 日期 房间类型 床位 容量 价格/晚 合计
u0628 9/14/2008 Std Hotel Room 2 Double 2 4 人 $109.00 $436.00
u0631 10/4/2008 Lodge Rm/Shared Bath Q 1 2 人 $109.00 $436.00
u0636 9/18/2008 Std Hotel Room Q 1 2 人 $117.00 $466.00
u0638 9/19/2008 Std Hotel Room 2 Q 2 4 人 $117.00 $466.00
u0612 9/1/2008 Studio Condo 1 4 人 $149.00 $596.00
u0626 9/13/2008 Hotel Jr Suite K 1 2 人 $149.00 $596.00
u0641 9/22/2008 Hotel Superior K 1 2 人 $149.00 $596.00
u0602 8/31/2008 1 Bdrm Condo K 1 4 人 $169.00 $676.00
u0616 10/8/2008 Studio Condo Murphy NaN 4 人 $169.00 $676.00
u0623 10/2/2008 Studio Cabin Q 1 2 人 $169.00 $676.00
u0633 9/16/2008 Studio Q/Murphy 2 4 人 $169.00 $676.00
u0637 10/5/2008 Lodge Room Q 1 2 人 $169.00 $676.00
u0622 9/11/2008 Hotel Loft Ste K/Q 2 4 人 $179.00 $716.00
u0629 10/10/2008 1 Bdrm Condo K 1 4 人 $179.00 $716.00
u0603 9/8/2008 Hotel Loft K/Q 2 4 人 $189.00 $756.00
u0632 9/15/2008 Hotel Loft K/2T 3 4 人 $189.00 $756.00
u0619 10/1/2008 Studio Cabin Firepl K 1 2 人 $209.00 $836.00
u0608 10/7/2008 1 Bdrm Condo with Den K 1 6 人 $222.00 $886.00
u0620 9/5/2008 2 Bdrm Condo K/K 2 6 人 $229.00 $916.00
u0630 9/7/2008 2 Bdrm Condo K/2T 3 6 人 $229.00 $916.00
u0634 10/11/2008 2 Bdrm Condo K/Q 2 6 人 $229.00 $916.00
u0639 9/20/2008 1 Bdrm K/Murphy 2 4 人 $229.00 $916.00
u0614 9/2/2008 2 Bdrm Townhome 2 4 人 $239.00 $956.00
u0610 9/10/2008 1 Bdrm Loft K/Q+2T/Murphy 5 8 人 $269.00 $1076.00
u0625 9/12/2008 2 Bdrm K/Q/Murphy 3 6 人 $269.00 $1076.00
u0640 9/21/2008 Exec. 2 Bdrm K/2Q/Murphy 4 8 人 $269.00 $1076.00
u0606 9/26/2008 2 Bdrm Cabin K/Q+T 3 5 人 $279.00 $1116.00
u0613 9/29/2008 Lodge 2 Bdrm Suite Q/Q 2 4 人 $279.00 $1116.00
u0624 10/3/2008 1 Bdrm Cabin Firepl K 1 4 人 $279.00 $1116.00
u0618 9/4/2008 2 Bdrm Condo w/Den Custom 2 6 人 $329.00 $1316.00
u0627 10/9/2008 3 Bdrm Condo K/Q/Q 3 8 人 $339.00 $1356.00
u0642 9/23/2008 2 Bdrm Cabin Firepl K/Q+T 3 7 人 $339.00 $1356.00
u0615 9/3/2008 3 Bdrm Condo K/Q/2T 4 8 人 $379.00 $1516.00
u0607 9/9/2008 2 Bdrm. Loft K/Q/Q,3T/SS 6 11 人 $389.00 $1556.00
u0609 9/27/2008 Dlx 1 Bdrm Cabin Firepl K 1 4 人 $389.00 $1556.00
u0635 9/17/2008 Exec 2 Bdrm Lft K/K/2Q/SS 4 10 人 $399.00 $1596.00
u0621 9/6/2008 3 Bdrm Townhome 3 6 人 $409.00 $1636.00
u0601 9/24/2008 3 Bdrm Cabin K/Q+T/2T 5 9 人 $469.00 $1876.00
u0605 9/25/2008 Dlx 1Bd Loft,K,Q/T firepl 3 6 人 $469.00 $1876.00
u0611 9/28/2008 Dlx 2 Bdm Cbn Firepl K/2T 2 6 人 $469.00 $1876.00
u0604 10/6/2008 Deluxe 3 Bdrm Condo K/Q/Q 3 8 人 $499.00 $1996.00
u0617 9/30/2008 Dlx3Bdm/2Bth/FP/K/QT/QT 5 8 人 $549.00 $2196.00

本文由澳门新葡亰app发布于新葡亰服务器,转载请注明出处:报表排序

关键词: