《JavaScript高级程序设计》学习笔记（表格排序）

 《JavaScript高级程序设计》学习笔记（表格排序）

表格排序

利用javascript直接在客户端对表格进行排序

 

数组

sort 方法 返回一个元素已经进行了排序的 Array 对象（注意参数设置）
localeCompare 方法 返回一个值，指出在当前的区域设置中两个字符串是否相同（设置sort参数）
reverse 方法 返回一个元素顺序被反转的 Array 对象（用于反转排序顺序）

 

对单列表格排序

1 为表格头部创建<thead/>元素，为存放数据的列创建<tbody/>元素
2 获取<tbody/>元素和它所包含的行的引用：
  var oTable = document.getElementById(sTableID);
  var oTBody = oTable.tBodise[0];
  var colDataRows = oTBody.rows;
3 创建一个数组，并将<tr/>元素引用放入其中
  var aTRs = new Array;
  for(var i=0; i < colDataRows.length; i++){
    aTRs.push(colDataRows[i]);
  }
4 对新数组进行排序
  比较函数：
  function compareTRs(oTR1, oTR2){
    var sValue1 = oTR1.cell[0].firstchild.nodeValue;
    var sValue2 = oTR2.cell[0].firstchild.nodeValue;
    return sValue1.localeCompare(sValue2);
  }
  aTRs.sort(compareTRs);
5 创建文档碎片储存排好序的<tr/>元素
  var oFragment = document.createDocumentFragment();
  for(var i=0; i < aTRs.length; i++){
    oFragment.appendChile(aTRs[i]);
  }
6 用appendChile方法把排好序的<tr/>元素添加到<tbody/>上
  oTBody.appendChile(oFragment);
7 在<thead/>元素的标签上添加onclick事件，触发排序事件

对多列表格进行排序

1 为表格头部创建<thead/>元素，为存放数据的列创建<tbody/>元素（同上）
2 获取<tbody/>元素和它所包含的行的引用（同上）
3 创建一个数组，并将<tr/>元素引用放入其中
  var aTRs = new Array;
  for(var i=0; i < colDataRows.length; i++){
    aTRs[i] = colDataRows[i];
  }
4 对新数组进行排序
  由于用于排序的比较函数只能有两个参数，所以创建一个比较函数生成器来返回一个比较函数的函数
  function generateCompareTRs(iCol) {
   return function compareTRs(oTR1, oTR2) {
           var sValue1 = oTR1.cell[iCol].firstchild.nodeValue;
           var sValue2 = oTR2.cell[iCol].firstchild.nodeValue;
           return sValue1.localeCompare(sValue2);
          };
  }
  //iCol是列的索引
  aTRs.sort(generateCompareTRs(1));
  //对数组进行排序
5 创建文档碎片储存排好序的<tr/>元素（同上）
6 用appendChile方法把排好序的<tr/>元素添加到<tbody/>上（同上）
7 在<thead/>元素的标签上添加onclick事件，触发排序事件
  注意要传递要排序的列的索引

逆序排列
可以在第一次排序之后，再触发排序事件的时候用reverse函数反转排序数组
aTRs.reverse();

对不同的数据类型进行排序

创建转换函数
function convert(sValue, sDataType) {
 swich(sDataType) {
  case "int":
   return parseInt(sValue);
  case "float":
   return parseFloat(sValue);
  case "date":
   return new Date(Date.parse(sValue));
  default:
   return sValue.toString();
 }
}

排序函数
对于数字和日期localeCompare不支持，所以使用大于小于号
function generateCompareTRs(iCol, sDataType) {
 return function compareTRs(oTR1, oTR2) {
         var vValue1 = convert(oTR1.cell[iCol].firstchild.nodeValue, sDataType);
         var vValue2 = convert(oTR2.cell[iCol].firstchild.nodeValue, sDataType);
         if (vValue1 < vValue2) {
          return -1;
         } else if (vValue1 > vValue2) {
          return 1;
         } else {
          return 0;
         }
        };
}

高级排序
对于不能进行正常排序的列（如链接、图像等），可以给<td/>添加value属性，再用getAttribute获取其值，并用来排序。
注意：对于严格的xhtml来说，这样做是不合法的，变通的方法是在title中放这个值，或设置一个不可见的div存放这个值