zoukankan      html  css  js  c++  java

  • jquery 排序table的列

    Jquery对Table表格排序(方法一)

    分类： JQUERY开发 CSS开发 2012-12-22 15:45 3452人阅读 评论(0) 收藏 举报
    [css] view plaincopy
    1. 在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。  

          为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。

          该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个<tr>中的html，同时获取每个<tr>标签下 对应获取到的列号的<td>标签中的内容，并取得<th>标签的type属性值，将获取<tr>的 html、<td>的内容和<th>的type属性值拼接成字符串添加到数组array中，然后将表格<tr>中的 html全部置空，根据type属性值的不同采用不同的方法对<td>的内容进行比较，根据比较结果对数组array进行排序，然后将排序后 的数组元素重新赋值给已经置空的<tr>。如果已经对该列排序过了，则直接对数组进行倒置。

    先看效果图:

    排序前:

    按价格排序后

    现在来看实现代码吧:

    CSS代码:

    [css] view plaincopy
    1. <style type="text/css">  
    2.         div  
    3.         {  
    4.              1024px;  
    5.             margin: 0 auto; /*div相对屏幕左右居中*/  
    6.         }  
    7.         table  
    8.         {  
    9.             border: solid 1px #666;  
    10.             border-collapse: collapse;  
    11.              100%;  
    12.             cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,default默认光标（通常是一个箭头）*/  
    13.         }  
    14.         tr  
    15.         {  
    16.             border: solid 1px #666;  
    17.             height: 30px;  
    18.         }  
    19.         table thead tr  
    20.         {  
    21.             background-color: #ccc;  
    22.         }  
    23.         td  
    24.         {  
    25.             border: solid 1px #666;  
    26.         }  
    27.         th  
    28.         {  
    29.             border: solid 1px #666;  
    30.             text-align: center;  
    31.             cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/  
    32.         }  
    33.         .sequence  
    34.         {  
    35.             text-align: center;  
    36.         }  
    37.         .hover  
    38.         {  
    39.             background-color: #3399FF;  
    40.         }  
    41.     </style>  


    HTML代码:

    [css] view plaincopy
    1. <div>  
    2.         <table id="tableSort">  
    3.             <thead>  
    4.                 <tr>  
    5.                     <th type="number">  
    6.                         序号  
    7.                     </th>  
    8.                     <th type="string">  
    9.                         书名  
    10.                     </th>  
    11.                     <th type="number">  
    12.                         价格（元）  
    13.                     </th>  
    14.                     <th type="string">  
    15.                         出版时间  
    16.                     </th>  
    17.                     <th type="number">  
    18.                         印刷量（册）  
    19.                     </th>  
    20.                     <th type="ip">  
    21.                         IP  
    22.                     </th>  
    23.                 </tr>  
    24.             </thead>  
    25.             <tbody>  
    26.                 <tr class="hover">  
    27.                     <td class="sequence">  
    28.                         1  
    29.                     </td>  
    30.                     <td>  
    31.                         狼图腾  
    32.                     </td>  
    33.                     <td>  
    34.                         29.80  
    35.                     </td>  
    36.                     <td>  
    37.                         2009-10  
    38.                     </td>  
    39.                     <td>  
    40.                         50000  
    41.                     </td>  
    42.                     <td>  
    43.                         192.168.1.125  
    44.                     </td>  
    45.                 </tr>  
    46.                 <tr>  
    47.                     <td class="sequence">  
    48.                         2  
    49.                     </td>  
    50.                     <td>  
    51.                         孝心不能等待  
    52.                     </td>  
    53.                     <td>  
    54.                         29.80  
    55.                     </td>  
    56.                     <td>  
    57.                         2009-09  
    58.                     </td>  
    59.                     <td>  
    60.                         800  
    61.                     </td>  
    62.                     <td>  
    63.                         192.68.1.125  
    64.                     </td>  
    65.                 </tr>  
    66.                 <tr>  
    67.                     <td class="sequence">  
    68.                         3  
    69.                     </td>  
    70.                     <td>  
    71.                         藏地密码2  
    72.                     </td>  
    73.                     <td>  
    74.                         28.00  
    75.                     </td>  
    76.                     <td>  
    77.                         2008-10  
    78.                     </td>  
    79.                     <td>  
    80.                     </td>  
    81.                     <td>  
    82.                         192.102.0.12  
    83.                     </td>  
    84.                 </tr>  
    85.                 <tr>  
    86.                     <td class="sequence">  
    87.                         4  
    88.                     </td>  
    89.                     <td>  
    90.                         藏地密码1  
    91.                     </td>  
    92.                     <td>  
    93.                         24.80  
    94.                     </td>  
    95.                     <td>  
    96.                         2008-10  
    97.                     </td>  
    98.                     <td>  
    99.                     </td>  
    100.                     <td>  
    101.                         215.34.126.10  
    102.                     </td>  
    103.                 </tr>  
    104.                 <tr>  
    105.                     <td class="sequence">  
    106.                         5  
    107.                     </td>  
    108.                     <td>  
    109.                         设计模式之禅  
    110.                     </td>  
    111.                     <td>  
    112.                         69.00  
    113.                     </td>  
    114.                     <td>  
    115.                         2011-12  
    116.                     </td>  
    117.                     <td>  
    118.                     </td>  
    119.                     <td>  
    120.                         192.168.1.5  
    121.                     </td>  
    122.                 </tr>  
    123.                 <tr>  
    124.                     <td class="sequence">  
    125.                         6  
    126.                     </td>  
    127.                     <td>  
    128.                         轻量级 Java EE 企业应用实战  
    129.                     </td>  
    130.                     <td>  
    131.                         99.00  
    132.                     </td>  
    133.                     <td>  
    134.                         2012-04  
    135.                     </td>  
    136.                     <td>  
    137.                         5000  
    138.                     </td>  
    139.                     <td>  
    140.                         192.358.1.125  
    141.                     </td>  
    142.                 </tr>  
    143.                 <tr>  
    144.                     <td class="sequence">  
    145.                         7  
    146.                     </td>  
    147.                     <td>  
    148.                         Java 开发实战经典  
    149.                     </td>  
    150.                     <td>  
    151.                         79.80  
    152.                     </td>  
    153.                     <td>  
    154.                         2012-01  
    155.                     </td>  
    156.                     <td>  
    157.                         2000  
    158.                     </td>  
    159.                     <td>  
    160.                         192.168.1.25  
    161.                     </td>  
    162.                 </tr>  
    163.                 <tr>  
    164.                     <td class="sequence" onclick="sortArray()">  
    165.                         8  
    166.                     </td>  
    167.                     <td>  
    168.                         Java Web 开发实战经典  
    169.                     </td>  
    170.                     <td>  
    171.                         69.80  
    172.                     </td>  
    173.                     <td>  
    174.                         2011-11  
    175.                     </td>  
    176.                     <td>  
    177.                         2500  
    178.                     </td>  
    179.                     <td>  
    180.                         215.168.54.125  
    181.                     </td>  
    182.                 </tr>  
    183.             </tbody>  
    184.         </table>  
    185.     </div>  


     

    Jquery代码部分

    [javascript] view plaincopy
      1. <script type="text/javascript">  
      2.         $(function () {  
      3.             var tableObject = $('#tableSort'); //获取id为tableSort的table对象  
      4.             var tbHead = tableObject.children('thead'); //获取table对象下的thead  
      5.             var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th  
      6.             var tbBody = tableObject.children('tbody'); //获取table对象下的tbody  
      7.             var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr  
      8.   
      9.             var sortIndex = -1;  
      10.   
      11.             tbHeadTh.each(function () {//遍历thead的tr下的th  
      12.                 var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号  
      13.                 //给表态th增加鼠标位于上方时发生的事件  
      14.                 $(this).mouseover(function () {  
      15.                     tbBodyTr.each(function () {//编列tbody下的tr  
      16.                         var tds = $(this).find("td"); //获取列号为参数index的td对象集合  
      17.                         $(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式  
      18.                     });  
      19.                 }).mouseout(function () {//给表头th增加鼠标离开时的事件  
      20.                     tbBodyTr.each(function () {  
      21.                         var tds = $(this).find("td");  
      22.                         $(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式  
      23.                     });  
      24.                 });  
      25.   
      26.                 $(this).click(function () {//给当前表头th增加点击事件  
      27.                     var dataType = $(this).attr("type");//点击时获取当前th的type属性值  
      28.                     checkColumnValue(thisIndex, dataType);  
      29.                 });  
      30.             });  
      31.   
      32.             $("tbody tr").removeClass(); //先移除tbody下tr的所有css类  
      33.             //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色  
      34.             $("tbody tr").mouseover(function () {  
      35.                 $(this).addClass("hover");  
      36.             }).mouseout(function () {  
      37.                 $(this).removeClass("hover");  
      38.             });  
      39.   
      40.             //对表格排序  
      41.             function checkColumnValue(index, type) {  
      42.                 var trsValue = new Array();  
      43.   
      44.                 tbBodyTr.each(function () {  
      45.                     var tds = $(this).find('td');  
      46.                     //获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中  
      47.                     trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());  
      48.                     $(this).html("");  
      49.                 });  
      50.   
      51.                 var len = trsValue.length;  
      52.   
      53.                 if (index == sortIndex) {  
      54.                 //如果已经排序了则直接倒序  
      55.                     trsValue.reverse();  
      56.                 } else {  
      57.                     for (var i = 0; i < len; i++) {  
      58.                         //split() 方法用于把一个字符串分割成字符串数组  
      59.                         //获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串数字Ip  
      60.                         type = trsValue[i].split(".separator")[0];  
      61.                         for (var j = i + 1; j < len; j++) {  
      62.                             //获取每行分割后数组的第二个值,即文本值  
      63.                             value1 = trsValue[i].split(".separator")[1];  
      64.                             //获取下一行分割后数组的第二个值,即文本值  
      65.                             value2 = trsValue[j].split(".separator")[1];  
      66.                             //接下来是数字字符串等的比较  
      67.                             if (type == "number") {  
      68.                                 value1 = value1 == "" ? 0 : value1;  
      69.                                 value2 = value2 == "" ? 0 : value2;  
      70.                                 if (parseFloat(value1) > parseFloat(value2)) {  
      71.                                     var temp = trsValue[j];  
      72.                                     trsValue[j] = trsValue[i];  
      73.                                     trsValue[i] = temp;  
      74.                                 }  
      75.                             } else if (type == "ip") {  
      76.                                 if (ip2int(value1) > ip2int(value2)) {  
      77.                                     var temp = trsValue[j];  
      78.                                     trsValue[j] = trsValue[i];  
      79.                                     trsValue[i] = temp;  
      80.                                 }  
      81.                             } else {  
      82.                                 if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器  
      83.                                     var temp = trsValue[j];  
      84.                                     trsValue[j] = trsValue[i];  
      85.                                     trsValue[i] = temp;  
      86.                                 }  
      87.                             }  
      88.                         }  
      89.                     }  
      90.                 }  
      91.   
      92.                 for (var i = 0; i < len; i++) {  
      93.                     $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);  
      94.                 }  
      95.   
      96.                 sortIndex = index;  
      97.             }  
      98.   
      99.             //IP转成整型  
      100.             function ip2int(ip) {  
      101.                 var num = 0;  
      102.                 ip = ip.split(".");  
      103.                 num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);  
      104.                 return num;  
      105.             }  
      106.   
      107.         })  
      108.     </script> 
  • 相关阅读:
    [洛谷P4725]【模板】多项式对数函数
    [洛谷P4841]城市规划
    [洛谷P4346][CERC2015]ASCII Addition
    [洛谷P3978][TJOI2015]概率论
    [洛谷P4656][CEOI2017]Palindromic Partitions
    [洛谷P4889]kls与flag
    [洛谷P3810]【模板】三维偏序（陌上花开）
    [洛谷P2613]【模板】有理数取余
    [bzoj4945][Noi2017]游戏
    [洛谷P4151][WC2011]最大XOR和路径
  • 原文地址：https://www.cnblogs.com/lengzhijun/p/4624796.html
Copyright © 2011-2022 走看看