基于jquery的表格排序_第1頁
基于jquery的表格排序_第2頁
基于jquery的表格排序_第3頁
基于jquery的表格排序_第4頁
基于jquery的表格排序_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、基于jquery的表格排序看了javascript高級程序設計里面有個表格排序的例子；覺得很有意思，所以自己用jquery 的基本庫做了一個，里面的概念基本和書里面的差不多很多高手也位jquery寫了專門的排序庫，因為自己也想嘗試一下，當然運行速度實在不能接受，但是我會慢慢的把他改進的。注：這里只是拿出了一部分代碼來，查看演示demo文檔載入后給w添加click事件。1.$('th').click(function()var datel=(new date().gettime()var datatype=$(this).attr('datatype');找到點擊

2、對象的自定義屬性datatype,當然這個不符合w3c的標準是無法通過檢驗的，也 可以用id或者class來定義，但是我覺得這樣直觀點在transitional模式下也可以正常解讀.2.var index=$('th').index(this)+l;找到被點擊對象在文檔中的位置加上1,加1是為了給所對應的列的td添加樣式才做的。因為用:eq()只能得到td的全文檔位置，而用：nth-child()的話得到的是每個td在自己的父元 素里面的序列位置。3.var row=$('tbody tr');將tbody里所有tr存到變量row.4.$.each(rowzfu

3、nction(i) arri=rowi)遍歷所有行講它插入arr數(shù)組.5.if($(this).hasclass(,select')arr.reverse()如果這個卅被點擊過那么它將會被添加select樣式，如果是這樣直接將原來的arr數(shù)組反向。6.else arr.sort(sortstr(index,datatype)$('.select').removeclass();$(,td:nth-child(,+index+')').addclass('select');$(this).addclass('select')

4、否則，將arr用sort()方法進行排序sort()方式可以接受1個函數(shù)，這個函數(shù)接受2個參數(shù)作 為需要比較的數(shù)據(jù)，我在這里定義為sortstr();它有兩個參數(shù)：復制代碼代碼如下: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!=,roomtyp

5、e,)atext=parse(atext,datatype)btext=parse(btext,datatype)return atext>btext?-l:btext>atext?l:o;else return atextoca iecom pa re(btext)第一個是index,它是在click事件中獲得的變量，這個變量包含了被點擊的那個w的在文檔 中的位置是一個數(shù)字，jquert的index()方法獲得對彖的位置，這個位置從0算起，這個例子中有6個先f；第二個參數(shù)是datatype,他包含每個w的屬性值。sortstr()里面包含了一個比較的函數(shù)，這個函數(shù)是匿名函數(shù)，它有

6、2個參數(shù)每個參數(shù)代表著 一個,tbody tr*,(在這里a和b代表需要比較的tr)這兩個參數(shù)是在包含他的函數(shù)環(huán)境中獲 取的，sort()方法里面的參數(shù)，在這是一個函數(shù)，這個函數(shù)都會獲得數(shù)組對象的元素， 這個匿名函數(shù)返回對操作數(shù)組的引用。arr里面包含的一個數(shù)組，每個數(shù)組的值包含對tbody里面的tr的引用，排序函數(shù)按照返回 的值對原有數(shù)組里面的元素直接進行位置的改變，var atext=$(a).find('td:nth-child('+index+')').text();獲取需要比較的行里面其中一個td里面包含的文本這個就是需要比較的值，click事件中得到

7、的index變量成為參數(shù)傳遞到這里就是為了得到th所對應的td的位置；復制代碼代碼如下：if(datatype!='roomtype')atext=parse(atext,datatype) btext=parse(btext,datatype) return atext>btext?-l:btext>atext?l:o;如果需要排序的類型是不包含了數(shù)字和字母的話，(因為擁有roomtype值的元素所包含了 數(shù)字和字母)，將獲得的td里面的文本值和datatype傳遞到parse()里面進行轉換,復制代碼代碼如下：function parse(data,dataty

8、pe)switch(datatype)case sum':return parsefloat(data)| |0case date':return date.parse(data)| |0default:return splitstr(data)如果是數(shù)字類型直接轉換為浮點數(shù)，return parsefloat(data)| |0要是出現(xiàn)了布恩那個轉換的對象字符串那么返回0；因為這個文檔里面有一個nan這個是無 法轉換的，所以返回的是0；如果是日期類型可以用date.parse直接轉換為數(shù)字，這個轉換是從1970年到轉換參數(shù)的時 間，這個時間轉換我試了試可以精確到秒的，比如說1

9、971/31/2 18:12:20、01/2/1970 18:12:20寫法 都可以轉換；之后return atext>btext?-l:btext>atext?l:o;返回比較值atext比btext大返回一個小于0的任何數(shù)字都可以，相反返回一個正數(shù)，如果 都不是的話返回0；如果不是tl期也不是數(shù)字(在這個文檔中目前只能轉換3中數(shù)據(jù)：1.b 期。2數(shù)字。3.字符串和數(shù)字一起的)，default:return splitstr(data)我把他放到splitstrf)里面進行轉換splitstr()的內容如下:復制代碼代碼如下：function splitstr(data)var

10、re=/a$a-za-zu4e00-u9fa5 *(.*?)a-za-zu4e00-u9fa5 *$/data=data.replace(re/$l')return parsefloat(data) 正則表達式：分為三部分1部分aa-za-z*;中間部分(.*?);結尾部分a-za-z*$可以這樣看/是包含塊,第一部分八表示目標字符串開頭，z間表示a-z無論大小寫都被忽略掉，里面還有個空格, *表示它左邊里面的內容可以出現(xiàn)任意次數(shù)；中間部分()是個分組,分組內容會被放置到regexp的第一項中, t匹配所有(除了空 格)*?懶惰方式；最后部分之間與后面的*和第一部分是一樣的都是去掉字母

11、，$表示結尾部分；$表示匹配$號復制代碼代碼如下：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,d atatype)return atex

12、t>btext?-l:btext>atext?l:o;else return atextoca iecom pa re(btext)否則直接使用localecompare進行比較，這個是專門對字符串進行比較的方法，如:字符串 0比字符串b排在26的單詞的前面;返回的依然是大于0的數(shù)，負數(shù)和0；代碼最開頭部分的new date和結束部分的new date是計算表格排序時間的，這個時間會在 最屮間那個卅的'span'fe記里面顯示出來，這樣是為了測試整個表格排序從排序開始到排序 結束所花費的吋i、可。完整的代碼：復制代碼代碼如下：<!doctype html pu

13、blic n-/w3c/dtd xhtml 1.0 transitional/enhhxhtmll-transitional.dtd"><html xmlns="><head><meta http-equiv=,'content-type" content="text/html; charset=utf-8" /><title> 表格排序 </title><script src=n./jqueryl.2.6.min.js,lx/script><scrip

14、t ianguage=,javascript" type=htext/javascript'、$(function()$('th').click(function()var datel=(new dated).gettime()var datatype=$(this).attr(,datatype,);var index=$('th').index(this)+l;var arr=;var row=$(,tbody tr1);$.each(row,function(i) arri=rowi) if($(this).hasclass('s

15、elect') arr.reverse()else arr.sort(sortstr(i ndexdatatype)$(*.select').removeclassf);$(,td:nth-child('+index+')').addclass('select');$(this).addclass('select')var fragme nt=docume nt.createdocume ntfragme nt()$.each(arr,f un ctio n(i)fra gm en t.app en dchild(arri

16、)/ $('tbody').remove();/$(,table').append(,<tbodyx/tbody>')/each(arr,f unction(o )fragme nt.app en dchild(o)sctbodyj.appe nd(fragme nt)var date2=(new date().gettime()$('th span').text(date2-datel)function sortstr(index,datatype)return function(a,b)var atext=$(a).find(&#

17、39;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?-l:btext>atext?l:o;else return atextoca iecom pa re(btext)function parse(data,dataty

18、pe)switch(datatype)case * urn1:return parsefloat(data)| |0case sate':return date.parse(data)| |odefault:return splitstr(data)function splitstr(data)var re=/a$a-za-zu4e00-u9fa5 *(.*?)a-za-zu4e00-u9fa5 *$/data=data.replace(re/$l,)return parsefloat(data)</script><style type=htext/cssu>t

19、able text-align:center;border:lpx #ccc solid;border-collapse:collapse;width:700px;fon t-size:12px;font-family:arial, helvetica, sans-serif;color:#666;trborder-bottom:lpx #ccc solid;tdpadding:.3em 0 .3em 0;thcursor:pointer;background:uri(room-bggif) 0 -13px repeat-x;height:30px;color:#009;td.select c

20、olor:#000;th.select background-image:none;background-color:#c4d5d9;span </style></head><body><a href="mymickey" style="font-size:14px; color:#f60">返回文章v/a><table><thead><tr><th datatype="roomnum">房號v/th><th dataty

21、pe="date">h 期v/th><th datatype="roomtype">房間類型vspanx/spanx/th><th datatype="num">床位v/th><th datatype="container">容量</th><th datatype="float">價格/晚v/th><th datatype="float">合計</th></

22、tr></thead><tbody><tr ><td>u0628</td><td >9/14/2008</td><td >std hotel room 2 double (27 left)</td><td >2</td><td >4 人v/td><td >$109.00</td><td>$436.00</td></tr><tr ><td>uo631</

23、td><td >10/q/2008</td><td >lodge rm/shared bath q (4 left)</td><td >l</td><td >2 人v/td><td >$109.00</td><td>$436.00</td></tr><tr ><td >u0636</td><td >9/l§z2008</td><td >std hotel ro

24、om q (34 left)</td><td >l</td><td >2 人v/td><td >$117.00</td><td >$466.00</td></tr><tr ><td>u0638</td><td >9/19/2008</td><td >std hotel room 2 q (28 left)</td><td >2</td><td >4 人v/td&g

25、t;<td >$117.00</td><td>$466.00</td></tr><tr ><td>u0612</td><td >9/1/2008</td><td >studio condo (10 left)</td><td >l</td><td >4 人v/td><td >$149.00</td><td>$596.00</td></tr><tr

26、 ><td>u0626</td><td >9/lv2008</td><td >hotel jr suite k (4 left)</td><td >l</td><td >2 人v/td><td >$149.00</td><td>$596.00</td></tr><tr ><td>u0641</td><td >9/2008</td><td >hot

27、el superior k (26 left)</td><td >l</td><td >2 人v/td><td >$149.00</td><td>$596.00</td></tr><tr ><td>u0602</td><td >&3切008v/td><td >1 bdrm condo k (96 left)</td><td >l</td><td >4 人 v/t

28、d><td >$169.00</td><td>$676.00</td></tr><tr ><td>uo616</td><td >102008</td><td >studio condo murphy (5 left)</td><td >nan</td><td >4 人v/td><td >$169.00</td><td>$676.00</td></tr&

29、gt;<tr ><td>u0623</td><td >loa/2oo8</td><td >studio cabin q (6 left)</td><td >l</td><td >2 人v/td><td >$169.00</td><td>$676.00</td></tr><tr ><td>uo633</td><td >9/12008</td><td

30、 >studio q/murphy (6 left)</td><td >2</td><td >4 人v/td><td >$169.00</td><td>$676.00</td></tr><tr ><td>u0637</td><td >10/72008</td><td >lodge room q (4 left)</td><td >l</td><td >2 人

31、v/td><td >$169.00</td><td>$676.00</td></tr><tr ><td>u0622</td><td >9/lv2008</td><td >hotel loft ste k/q (3 left)</td><td >2</td><td >4 人 v/td><td >$179.00</td><td>$716.00</td></

32、tr><tr ><td>u0629</td><td >10/10/2008</td><td >1 bdrm condo k (76 left)</td><td >l</td><td >4 人v/td><td >$179.00</td><td>$716.00</td></tr><tr ><td>u0603</td><td >w008</td><

33、;td >hotel loft k/q (16 left)</td><td >2</td><td >4 人v/td><td >$189.00</td><td>$756.00</td></tr><tr ><td>u0632</td><td >9/15/2oo8</td><td >hotel loft k/2t (15 left)</td><td >3</td><td

34、 >4 人v/td><td >$189.00</td><td>$756.00</td></tr><tr ><td>u0619</td><td >10/v2008</td><td >studio cabin firepl k (6 left)</td><td >l</td><td >2 人v/td><td >$209.00</td><td>$836.00</t

35、d></tr><tr ><td>u0608</td><td >10/2008</td><td >1 bdrm condo with den k (1 left)</td><td >l</td><td >6 人v/td><td >$222.00</td><td>$886.00</td></tr><tr ><td>u0620</td><td >9/2

36、008</td><td >2 bdrm condo k/k (25 left)</td><td >2</td><td >6 人 v/td><td >$229.00</td><td>$916.00</td></tr><tr ><td>u0630</td><td >9加008v/td><td >2 bdrm condo k/2t (57 left)</td><td >3&l

37、t;/td><td >6 人v/td><td >$229.00</td><td>$916.00</td></tr><tr ><td>u0634</td><td >lo/ll/2oo8</td><td >2 bdrm condo k/q (88 left)</td><td>2</td><td>6 a</td><td>$229.00</td><td>

38、$916.00</td></tr><tr ><td>u0639</td><td >9/2o/2oo8</td><td >1 bdrm k/murphy (19 left)</td><td >2</td><td >4 人v/td><td >$229.00</td><td>$916.00</td></tr><tr ><td>u0614</td><td

39、 >9妙008v/td><td >2 bdrm townhome (7 left)</td><td >2</td><td >4 人v/td><td >$239.00</td><td>$956.00</td></tr><tr ><td>u0610</td><td >9/10/2008</td><td >1 bdrm loft k/q+2t/murphy (5 left)</td>

40、;<td >5</td><td >8 人v/td><td >$269.00</td><td>$1076.00</td></tr><tr ><td>u0625</td><td >9/12/2oo8</td><td >2 bdrm k/q/murphy (6 left)</td><td >3</td><td >6 人 v/td><td >$269.00</

41、td><td>$1076.00</td></tr><tr ><td>u0640</td><td >9/21/2oo8</td><td >exec. 2 bdrm k/2q/murphy (2 left)</td><td >4</td><td >8 人v/td><td >$269.00</td><td>$1076.00</td></tr><tr ><td

42、>u0606</td><td >9/22008</td><td >2 bdrm cabin k/q+t (2 left)</td><td >3</td><td >5 人v/td><td >$279.00</td><td>$1116.00</td></tr><tr ><td>u0613</td><td >9/29/2008</td><td >lodge 2 b

43、drm suite q/q (1 left)</td><td >2</td><td >4 人v/td><td >$279.00</td><td>$1116.00</td></tr><tr ><td>u0624</td><td >10/3008</td><td >1 bdrm cabin firepl k (3 left)</td><td >l</td><td >4

44、 人v/td><td >$279.00</td><td>$1116.00</td></tr><tr ><td>u0618</td><td >9/v2008</td><td >2 bdrm condo w/den custom (1 left)</td><td >2</td><td >6 人v/td><td >$329.00</td><td>$1316.00</td

45、></tr><tr ><td>uo627</td><td >10/9/2008</td><td >3 bdrm condo k/q/q (6 left)</td><td >3</td><td >8 人v/td><td >$339.00</td><td>$1356.00</td></tr><tr ><td>u0642</td><td >9/2的00

46、8v/td><td >2 bdrm cabin firepl k/q+t (1 left)</td><td >3</td><td >7 人v/td><td >$339.00</td><td>$1356.00</td></tr><tr ><td>u0615</td><td >9008v/td><td >3 bdrm condo k/q/2t (2 left)</td><td >

47、4</td><td >8 人v/td><td >$379.00</td><td>$1516.00</td></tr><tr ><td>u0607</td><td >9/9/2008</td><td >2 bdrm. loft k/q/q,3t/ss (9 left)</td><td >6</td><td >11 人v/td><td >$389.00</td>

48、<td>$1556.00</td></tr><tr ><td>u0609</td><td >9/22008</td><td >dlx 1 bdrm cabin firepl k (3 left)</td><td >l</td><td >4 人v/td><td >$389.00</td><td>$1556.00</td></tr><tr ><td>uo635</td><td >9/1 加008v/td><td >exec

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論