WEB开发网
开发学院网页设计JavaScript javascript操作表格排序 阅读

javascript操作表格排序

 2010-09-14 13:06:43 来源:WEB开发网   
核心提示:表格排序,一般的处理方法是传递排序的字段到后台进行重新查询并排序,javascript操作表格排序,javascript也可以做到简单的表格排序,备忘代码: //类型转换器,sDataType表示该列的数据类型function generateCompareTRs(iCol, sDataType) {returnfun

表格排序,一般的处理方法是传递排序的字段到后台进行重新查询并排序,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[i] = colDataRows[i];
        }
        
        //判断最后一次排序的列是否与现在要进行排序的列相同,是的话,直接使用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[i]);
        }
   
        oTBody.appendChild(oFragment);
        //记录最后一次排序的列索引
        oTable.sortCol = iCol;
      }

1 2  下一页

Tags:javascript 操作 表格

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接