请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 193|回复: 9

[js] javascript操作表格排序

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-17 22:49:24 | 显示全部楼层 |阅读模式

表格排序,一般的处理方法是传递排序的字段到后台进行重新查询并排序,javascript也可以做到简单的表格排序,备忘代码:

      //类型转换器,将列的字段类型转换为可以排序的类型:String,int,float
      function convert(sValue, sDataType) {
        switch(sDataType) {
          case "int":
            return parseInt(sValue);
          case "float":
            return parseFloat(sValue);
          case "date":
            return new Date(Date.parse(sValue));
          default:
            return sValue.toString();
        
        }
      }
      
      //排序函数产生器,iCol表示列索引,sDataType表示该列的数据类型
      function generateCompareTRs(iCol, sDataType) {
    
        return function compareTRs(oTR1, oTR2) {
              var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
              var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
    
              if (vValue1 < vValue2) {
                return -1;
              } else if (vValue1 > vValue2) {
                return 1;
              } else {
                return 0;
              }
            };
      }
      
      //排序方法
      function sortTable(sTableID, iCol, sDataType) {
        var oTable = document.getElementById(sTableID);
        var oTBody = oTable.tBodies[0];
        var colDataRows = oTBody.rows;
        var aTRs = new Array;
        
        //将所有列放入数组
        for (var i=0; i < colDataRows.length; i++) {
          aTRs = colDataRows;
        }
        
        //判断最后一次排序的列是否与现在要进行排序的列相同,是的话,直接使用reverse()逆序
        if (oTable.sortCol == iCol) {
          aTRs.reverse();
        } else {
          //使用数组的sort方法,传进排序函数
          aTRs.sort(generateCompareTRs(iCol, sDataType));
        }
    
        var oFragment = document.createDocumentFragment();
        for (var i=0; i < aTRs.length; i++) {
          oFragment.appendChild(aTRs);
        }
   
        oTBody.appendChild(oFragment);
        //记录最后一次排序的列索引
        oTable.sortCol = iCol;
      }

完整例子:

<html>
  <head>
  <title>Table Sort Example</title>
    <script type="text/javascript">
      
      //转换器,将列的字段类型转换为可以排序的类型:String,int,float
      function convert(sValue, sDataType) {
        switch(sDataType) {
          case "int":
            return parseInt(sValue);
          case "float":
            return parseFloat(sValue);
          case "date":
            return new Date(Date.parse(sValue));
          default:
            return sValue.toString();
        
        }
      }
      
      //排序函数产生器,iCol表示列索引,sDataType表示该列的数据类型
      function generateCompareTRs(iCol, sDataType) {
    
        return function compareTRs(oTR1, oTR2) {
              var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
              var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
    
              if (vValue1 < vValue2) {
                return -1;
              } else if (vValue1 > vValue2) {
                return 1;
              } else {
                return 0;
              }
            };
      }
      
      //排序方法
      function sortTable(sTableID, iCol, sDataType) {
        var oTable = document.getElementById(sTableID);
        var oTBody = oTable.tBodies[0];
        var colDataRows = oTBody.rows;
        var aTRs = new Array;
        
        //将所有列放入数组
        for (var i=0; i < colDataRows.length; i++) {
          aTRs = colDataRows;
        }
        
        //判断最后一次排序的列是否与现在要进行排序的列相同,是的话,直接使用reverse()逆序
        if (oTable.sortCol == iCol) {
          aTRs.reverse();
        } else {
          //使用数组的sort方法,传进排序函数
          aTRs.sort(generateCompareTRs(iCol, sDataType));
        }
    
        var oFragment = document.createDocumentFragment();
        for (var i=0; i < aTRs.length; i++) {
          oFragment.appendChild(aTRs);
        }
   
        oTBody.appendChild(oFragment);
        //记录最后一次排序的列索引
        oTable.sortCol = iCol;
      }
  
    </script>
  </head>
  <body>
    <p>Click on the table header to sort in ascending order.</p>
    <table border="1" id="tblSort">
      <thead>
        <tr>
          <th
            style="cursor:pointer">Last Name</th>
          <th
            style="cursor:pointer">First Name</th>
          <th
            style="cursor:pointer">Birthday</th>
          <th
            style="cursor:pointer">Siblings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Smith</td>
          <td>John</td>
          <td>7/12/1978</td>
          <td>2</td>
        </tr>
        <tr>
          <td>Johnson</td>
          <td>Betty</td>
          <td>10/15/1977</td>
          <td>4</td>
        </tr>
        <tr>
          <td>Henderson</td>
          <td>Nathan</td>
          <td>2/25/1949</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Williams</td>
          <td>James</td>
          <td>7/8/1980</td>
          <td>4</td>
        </tr>
        <tr>
          <td>Gilliam</td>
          <td>Michael</td>
          <td>7/22/1949</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Walker</td>
          <td>Matthew</td>
          <td>1/14/2000</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>    
  </body>
</html>

想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com
回复

使用道具 举报

0

主题

902

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-3-11 20:00:56 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

1

主题

1021

帖子

69

积分

注册会员

Rank: 2

积分
69
发表于 2016-3-13 16:47:23 | 显示全部楼层
顶楼主,帮你顶个贴,我挣个积分
回复 支持 反对

使用道具 举报

0

主题

94

帖子

201

积分

中级会员

Rank: 3Rank: 3

积分
201
发表于 2016-3-27 14:44:54 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

2

主题

939

帖子

108

积分

注册会员

Rank: 2

积分
108
发表于 2016-4-1 15:06:21 | 显示全部楼层
能再解释的细节一些吗,具体的
回复 支持 反对

使用道具 举报

2

主题

916

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2016-8-16 10:50:15 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

2

主题

916

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2016-11-27 13:20:14 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

0

主题

863

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2016-12-29 16:48:39 | 显示全部楼层
好啊楼主,没想到啊,太好了
回复 支持 反对

使用道具 举报

1

主题

1021

帖子

69

积分

注册会员

Rank: 2

积分
69
发表于 2017-5-28 18:16:46 | 显示全部楼层
太给力啊 跪谢啊
回复 支持 反对

使用道具 举报

1

主题

849

帖子

7

积分

注册会员

Rank: 2

积分
7
发表于 2018-10-18 16:30:54 | 显示全部楼层
写的不错,支持一下哟
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 18:00 , Processed in 0.228233 second(s), 31 queries .

快速回复 返回顶部 返回列表