首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

javascript table 报表排序

2012-11-23 
javascript table 表格排序在功能上实现了对表格不同内容的升序和降序的排序,内容可能是字符串,int类型,日

javascript table 表格排序
在功能上实现了对表格不同内容的升序和降序的排序,内容可能是字符串,int类型,日期类型,float类型等。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>对单列表格进行排序</title><meta name="generator" content="Studio 3 http://aptana.com/"><meta name="author" content="Administrator"><script type="text/javascript" src="js/test3.js"></script></head><body><table border="1" id="tblsort"><thead><tr><th onclick="table.sortTable('tblsort',0)" style="cursor: pointer">Last Name</th><th onclick="table.sortTable('tblsort',1)" style="cursor: pointer">First Name</th><th onclick="table.sortTable('tblsort',2,'int')" style="cursor: pointer">Age</th><th onclick="table.sortTable('tblsort',3,'date')" style="cursor: pointer">Birth Day</th><th onclick="table.sortTable('tblsort',4,'float')" style="cursor: pointer">Pay</th></tr></thead><tbody><tr><td>Adam</td><td>Jack</td><td>26</td><td>1/12/1977</td><td>3000.12</td></tr><tr><td>Smith</td><td>Lucy</td><td>28</td><td>6/12/1975</td><td>4000.23</td></tr><tr><td>Johnson</td><td>Lily</td><td>35</td><td>07/12/1965</td><td>5000.03</td></tr><tr><td>Williams</td><td>Pual</td><td>25</td><td>12/08/1984</td><td>5000.56</td></tr><tr><td>Gilliam</td><td>Jack</td><td>45</td><td>6/4/1953</td><td>10000</td></tr><tr><td>Bill</td><td>Hamson</td><td>36</td><td>9/8/1971</td><td>8000</td></tr><tr><td>Mowen</td><td>Alex</td><td>10</td><td>11/12/2000</td><td>6000</td></tr></tbody></table></body></html>

/** * @author Administrator */table = {compareTRS : function (otr1, otr2) {var value1 = otr1.cells[0].firstChild.nodeValue;var value2 = otr2.cells[0].firstChild.nodeValue;return value1.localeCompare(value2);},sortTable : function (tableId,col,datatype) {var otable = document.getElementById(tableId);    var tbody = otable.tBodies[0];var colDataRows = tbody.rows;var trs = [];for (var i=0; i < colDataRows.length; i++) {trs.push(colDataRows[i]);};if (otable.sortCol == col) {trs.reverse();} else {trs.sort(table.generateCompareTRS(col, datatype));}var fragment = document.createDocumentFragment();for (var i=0; i < trs.length; i++) {  fragment.appendChild(trs[i]);};tbody.appendChild(fragment);otable.sortCol = col;},generateCompareTRS : function (col, datatype) {  return function compareTRS (tr1, tr2) {var value1 = table.convert(tr1.cells[col].firstChild.nodeValue, datatype);var value2 = table.convert(tr2.cells[col].firstChild.nodeValue, datatype);if (value1 < value2) {return -1;} else if (value1 > value2) {return 1;} else {return 0;}  }},convert : function (value, datatype) {  switch(datatype) {  case "int":  return parseInt(value);  case "float":  return parseFloat(value);  case "date":  return new Date(Date.parse(value));  default:   return value.toString();  }}}


注意这个方法的使用,用到了javascript闭包的技术。
generateCompareTRS : function (col, datatype) {  return function compareTRS (tr1, tr2) {var value1 = table.convert(tr1.cells[col].firstChild.nodeValue, datatype);var value2 = table.convert(tr2.cells[col].firstChild.nodeValue, datatype);if (value1 < value2) {return -1;} else if (value1 > value2) {return 1;} else {return 0;}  }}


1 楼 xgf012 2011-08-03   mark

热点排行