报表排序
很多高手也位jquery写了专门的排序库，因为自己也想尝试一下， 当然运行速度实在不能接受，但是我会慢慢的把他改进的。 注：这里只是拿出了一部分代码来，查看演示demo 文档载入后给'th'添加click事件。 1. $.click{ var date1= var dataType=$.attr; 找到点击对象的自定义属性dataType，当然这个不符合W3C的标准是无法通过检验的，也可以用ID或者class来定义，但是我觉得这样直观点在Transitional模式下也可以正常解读.
- var index=$+1; 找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。 因为用:eq()只能得到td的全文档位置，而用：nth-child()的话得到的是每个td在自己的父元素里面的序列位置。
- var row=$; 将tbody里所有tr存到变量row. 4. $.each{ arr[i]=row[i] }) 遍历所有行讲它插入arr数组. 5.if.hasClass{arr.reverse()} 如果这个'th'被点击过那么它将会被添加select样式，如果是这样直接将原来的arr数组反向。
- 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发布于新葡亰服务器,转载请注明出处：报表排序
关键词：