zoukankan      html  css  js  c++  java

  • 基于jquery的表格排序

    很多高手也位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'标记里面显示出来，这样是为了测试整个表格排序从排序开始到排序结束所花费的时间。 

    完整的代码:

    复制代码代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>表格排序</title> 
    <script src="../jquery1.2.6.min.js"></script> 
    <script language="javascript" type="text/javascript"> 

    $(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('<tbody></tbody>') 
    //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-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/ 
    data=data.replace(re,'$1') 
    return parseFloat(data) 
    } 

    //web开发交流blog 文档来源 www.mymickey.org 作者 mickey 
    //转载请注明来源 
    </script> 
    <style type="text/css"> 
    table { 
    text-align:center; 
    border:1px #ccc solid; 
    border-collapse:collapse; 
    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(room-bg.gif) 0 -13px repeat-x; 
    height:30px; 
    color:#009; 
    } 
    td.select { 
    color:#000; 
    } 
    th.select { 
    background-image:none; 
    background-color:#C4D5D9; 
    } 
    span { 
    } 
    </style> 
    </head> 
    <body> 
    <a href="http://www.mymickey.org" style="font-size:14px; color:#F60">返回文章</a> 

    <table> 
    <thead> 
    <tr> 
    <th dataType="roomNum">房号</th> 
    <th dataType="date">日期</th> 
    <th dataType="roomType">房间类型<span></span></th> 
    <th dataType="num">床位</th> 
    <th dataType="container">容量</th> 
    <th dataType="Float">价格/晚</th> 
    <th dataType="Float">合计</th> 
    </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 人</td> 
    <td >$109.00</td> 
    <td>$436.00</td> 
    </tr> 
    <tr > 
    <td>u0631</td> 
    <td >10/4/2008</td> 
    <td >Lodge Rm/Shared Bath Q (4 left)</td> 
    <td >1</td> 
    <td >2 人</td> 
    <td >$109.00</td> 
    <td>$436.00</td> 
    </tr> 
    <tr > 
    <td >u0636</td> 
    <td >9/18/2008</td> 
    <td >Std Hotel Room Q (34 left)</td> 
    <td >1</td> 
    <td >2 人</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 人</td> 
    <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 >1</td> 
    <td >4 人</td> 
    <td >$149.00</td> 
    <td>$596.00</td> 
    </tr> 
    <tr > 
    <td>u0626</td> 
    <td >9/13/2008</td> 
    <td >Hotel Jr Suite K (4 left)</td> 
    <td >1</td> 
    <td >2 人</td> 
    <td >$149.00</td> 
    <td>$596.00</td> 
    </tr> 
    <tr > 
    <td>u0641</td> 
    <td >9/22/2008</td> 
    <td >Hotel Superior K (26 left)</td> 
    <td >1</td> 
    <td >2 人</td> 
    <td >$149.00</td> 
    <td>$596.00</td> 
    </tr> 
    <tr > 
    <td>u0602</td> 
    <td >8/31/2008</td> 
    <td >1 Bdrm Condo K (96 left)</td> 
    <td >1</td> 
    <td >4 人</td> 
    <td >$169.00</td> 
    <td>$676.00</td> 
    </tr> 
    <tr > 
    <td>u0616</td> 
    <td >10/8/2008</td> 
    <td >Studio Condo Murphy (5 left)</td> 
    <td >NaN</td> 
    <td >4 人</td> 
    <td >$169.00</td> 
    <td>$676.00</td> 
    </tr> 
    <tr > 
    <td>u0623</td> 
    <td >10/2/2008</td> 
    <td >Studio Cabin Q (6 left)</td> 
    <td >1</td> 
    <td >2 人</td> 
    <td >$169.00</td> 
    <td>$676.00</td> 
    </tr> 
    <tr > 
    <td>u0633</td> 
    <td >9/16/2008</td> 
    <td >Studio Q/Murphy (6 left)</td> 
    <td >2</td> 
    <td >4 人</td> 
    <td >$169.00</td> 
    <td>$676.00</td> 
    </tr> 
    <tr > 
    <td>u0637</td> 
    <td >10/5/2008</td> 
    <td >Lodge Room Q (4 left)</td> 
    <td >1</td> 
    <td >2 人</td> 
    <td >$169.00</td> 
    <td>$676.00</td> 
    </tr> 
    <tr > 
    <td>u0622</td> 
    <td >9/11/2008</td> 
    <td >Hotel Loft Ste K/Q (3 left)</td> 
    <td >2</td> 
    <td >4 人</td> 
    <td >$179.00</td> 
    <td>$716.00</td> 
    </tr> 
    <tr > 
    <td>u0629</td> 
    <td >10/10/2008</td> 
    <td >1 Bdrm Condo K (76 left)</td> 
    <td >1</td> 
    <td >4 人</td> 
    <td >$179.00</td> 
    <td>$716.00</td> 
    </tr> 
    <tr > 
    <td>u0603</td> 
    <td >9/8/2008</td> 
    <td >Hotel Loft K/Q (16 left)</td> 
    <td >2</td> 
    <td >4 人</td> 
    <td >$189.00</td> 
    <td>$756.00</td> 
    </tr> 
    <tr > 
    <td>u0632</td> 
    <td >9/15/2008</td> 
    <td >Hotel Loft K/2T (15 left)</td> 
    <td >3</td> 
    <td >4 人</td> 
    <td >$189.00</td> 
    <td>$756.00</td> 
    </tr> 
    <tr > 
    <td>u0619</td> 
    <td >10/1/2008</td> 
    <td >Studio Cabin Firepl K (6 left)</td> 
    <td >1</td> 
    <td >2 人</td> 
    <td >$209.00</td> 
    <td>$836.00</td> 
    </tr> 
    <tr > 
    <td>u0608</td> 
    <td >10/7/2008</td> 
    <td >1 Bdrm Condo with Den K (1 left)</td> 
    <td >1</td> 
    <td >6 人</td> 
    <td >$222.00</td> 
    <td>$886.00</td> 
    </tr> 
    <tr > 
    <td>u0620</td> 
    <td >9/5/2008</td> 
    <td >2 Bdrm Condo K/K (25 left)</td> 
    <td >2</td> 
    <td >6 人</td> 
    <td >$229.00</td> 
    <td>$916.00</td> 
    </tr> 
    <tr > 
    <td>u0630</td> 
    <td >9/7/2008</td> 
    <td >2 Bdrm Condo K/2T (57 left)</td> 
    <td >3</td> 
    <td >6 人</td> 
    <td >$229.00</td> 
    <td>$916.00</td> 
    </tr> 
    <tr > 
    <td>u0634</td> 
    <td >10/11/2008</td> 
    <td >2 Bdrm Condo K/Q (88 left)</td> 
    <td>2</td> 
    <td>6 人</td> 
    <td>$229.00</td> 
    <td>$916.00</td> 
    </tr> 
    <tr > 
    <td>u0639</td> 
    <td >9/20/2008</td> 
    <td >1 Bdrm K/Murphy (19 left)</td> 
    <td >2</td> 
    <td >4 人</td> 
    <td >$229.00</td> 
    <td>$916.00</td> 
    </tr> 
    <tr > 
    <td>u0614</td> 
    <td >9/2/2008</td> 
    <td >2 Bdrm Townhome (7 left)</td> 
    <td >2</td> 
    <td >4 人</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> 
    <td >5</td> 
    <td >8 人</td> 
    <td >$269.00</td> 
    <td>$1076.00</td> 
    </tr> 
    <tr > 
    <td>u0625</td> 
    <td >9/12/2008</td> 
    <td >2 Bdrm K/Q/Murphy (6 left)</td> 
    <td >3</td> 
    <td >6 人</td> 
    <td >$269.00</td> 
    <td>$1076.00</td> 
    </tr> 
    <tr > 
    <td>u0640</td> 
    <td >9/21/2008</td> 
    <td >Exec. 2 Bdrm K/2Q/Murphy (2 left)</td> 
    <td >4</td> 
    <td >8 人</td> 
    <td >$269.00</td> 
    <td>$1076.00</td> 
    </tr> 
    <tr > 
    <td>u0606</td> 
    <td >9/26/2008</td> 
    <td >2 Bdrm Cabin K/Q+T (2 left)</td> 
    <td >3</td> 
    <td >5 人</td> 
    <td >$279.00</td> 
    <td>$1116.00</td> 
    </tr> 
    <tr > 
    <td>u0613</td> 
    <td >9/29/2008</td> 
    <td >Lodge 2 Bdrm Suite Q/Q (1 left)</td> 
    <td >2</td> 
    <td >4 人</td> 
    <td >$279.00</td> 
    <td>$1116.00</td> 
    </tr> 
    <tr > 
    <td>u0624</td> 
    <td >10/3/2008</td> 
    <td >1 Bdrm Cabin Firepl K (3 left)</td> 
    <td >1</td> 
    <td >4 人</td> 
    <td >$279.00</td> 
    <td>$1116.00</td> 
    </tr> 
    <tr > 
    <td>u0618</td> 
    <td >9/4/2008</td> 
    <td >2 Bdrm Condo w/Den Custom (1 left)</td> 
    <td >2</td> 
    <td >6 人</td> 
    <td >$329.00</td> 
    <td>$1316.00</td> 
    </tr> 
    <tr > 
    <td>u0627</td> 
    <td >10/9/2008</td> 
    <td >3 Bdrm Condo K/Q/Q (6 left)</td> 
    <td >3</td> 
    <td >8 人</td> 
    <td >$339.00</td> 
    <td>$1356.00</td> 
    </tr> 
    <tr > 
    <td>u0642</td> 
    <td >9/23/2008</td> 
    <td >2 Bdrm Cabin Firepl K/Q+T (1 left)</td> 
    <td >3</td> 
    <td >7 人</td> 
    <td >$339.00</td> 
    <td>$1356.00</td> 
    </tr> 
    <tr > 
    <td>u0615</td> 
    <td >9/3/2008</td> 
    <td >3 Bdrm Condo K/Q/2T (2 left)</td> 
    <td >4</td> 
    <td >8 人</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 人</td> 
    <td >$389.00</td> 
    <td>$1556.00</td> 
    </tr> 
    <tr > 
    <td>u0609</td> 
    <td >9/27/2008</td> 
    <td >Dlx 1 Bdrm Cabin Firepl K (3 left)</td> 
    <td >1</td> 
    <td >4 人</td> 
    <td >$389.00</td> 
    <td>$1556.00</td> 
    </tr> 
    <tr > 
    <td>u0635</td> 
    <td >9/17/2008</td> 
    <td >Exec 2 Bdrm Lft K/K/2Q/SS (1 left)</td> 
    <td >4</td> 
    <td >10 人</td> 
    <td >$399.00</td> 
    <td>$1596.00</td> 
    </tr> 
    <tr > 
    <td>u0621</td> 
    <td >9/6/2008</td> 
    <td >3 Bdrm Townhome (3 left)</td> 
    <td >3</td> 
    <td >6 人</td> 
    <td >$409.00</td> 
    <td>$1636.00</td> 
    </tr> 
    <tr > 
    <td>u0601</td> 
    <td >9/24/2008</td> 
    <td >3 Bdrm Cabin K/Q+T/2T (1 left)</td> 
    <td >5</td> 
    <td >9 人</td> 
    <td >$469.00</td> 
    <td>$1876.00</td> 
    </tr> 
    <tr > 
    <td>u0605</td> 
    <td >9/25/2008</td> 
    <td >Dlx 1Bd Loft,K,Q/T firepl (1 left)</td> 
    <td >3</td> 
    <td >6 人</td> 
    <td >$469.00</td> 
    <td>$1876.00</td> 
    </tr> 
    <tr > 
    <td>u0611</td> 
    <td >9/28/2008</td> 
    <td >Dlx 2 Bdm Cbn Firepl K/2T (3 left)</td> 
    <td >2</td> 
    <td >6 人</td> 
    <td >$469.00</td> 
    <td>$1876.00</td> 
    </tr> 
    <tr > 
    <td>u0604</td> 
    <td >10/6/2008</td> 
    <td >Deluxe 3 Bdrm Condo K/Q/Q (2 left)</td> 
    <td >3</td> 
    <td >8 人</td> 
    <td >$499.00</td> 
    <td>$1996.00</td> 
    </tr> 
    <tr > 
    <td>u0617</td> 
    <td >9/30/2008</td> 
    <td >Dlx3Bdm/2Bth/FP/K/QT/QT (1 left)</td> 
    <td >5</td> 
    <td >8 人</td> 
    <td >$549.00</td> 
    <td>$2196.00</td> 
    </tr> 
    </tbody> 
    </table> 
    </body> 
    </html> 
  • 相关阅读:
    mybatis入门截图三
    centos 6.X 关闭selinux
    安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情（二）
    安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情（一）
    Linux定时任务Crontab命令详解
    CentOS 更换yum源为aliyun yum源
    CentOS7 FTP服务搭建（虚拟用户访问FTP服务）
    CentOS 7 安装Oracle 11gR2
    印度项目质量管理经验
    项目管理系列之质量管理
  • 原文地址：https://www.cnblogs.com/maogu2/p/2820395.html
Copyright © 2011-2022 走看看