以前学习js,没有意识到原来可以通过操作dom来对html表格进行排序。简单看了下书,关键是数组的一个sort方法传入一个自定义的比较函数,这个有点类似java的Collections.sort方法,然后自己实现一个简单的点击表头字段实现对应列的排序功能。
index.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="tableSort.js"></script>
<title>Insert title here</title>
</head>
<body οnlοad="TableUtils.sort('sort-table')">
<table id="sort-table" >
<thead>
<tr>
<th dataType="string">学号</th>
<th dataType="string">姓名</th>
<th dataType="number">年龄</th>
<th dataType="date">出生日期</th>
<th dataType="other">详细信息</th>
</tr>
</thead>
<tbody>
<tr>
<td>31130601</td>
<td>张三</td>
<td>22</td>
<td>1991-03-03</td>
<td><a href="#">button</a></td>
</tr>
<tr>
<td>31130612</td>
<td>李四</td>
<td>24</td>
<td>1989-04-12</td>
<td><a href="#">button</a></td>
</tr>
<tr>
<td>31130623</td>
<td>王五</td>
<td>21</td>
<td>1992-04-13</td>
<td><a href="#">button</a></td>
</tr>
<tr>
<td>31130601</td>
<td>钱六</td>
<td>18</td>
<td>1995-12-01</td>
<td><a href="#">button</a></td>
</tr>
</tbody>
</table>
</body>
</html>
页面比较简单,对于id为sort-table的table在onload事件中注册排序的功能。
核心的js如下:
var TableUtils = new Object(); TableUtils.sort = function(id){ var tb = document.getElementById(id); //获取表头字段 var ths = tb.tHead.children[0].children; //循环表头对每一列根据字段类型分别注册排序功能 for(var x in ths){ ths[x].style.cursor = 'pointer'; //默认为顺序排列 ths[x].setAttribute("order","ASC"); ths[x].onclick = function(e){ var t = 0; //获取指定的列对象的序号 for(var i in ths){ if(ths[i].innerHTML == e.target.innerHTML){ t = i; } } var trs = tb.tBodies[0].rows; var arr = new Array(); //将指定列的所有单元格放入数组中 for(var i=0;i<=trs.length-1;i++){ arr.push(trs[i].cells[t]); } //获取字段类型,根据字段类型指定比较方法 var dataType = e.target.getAttribute("dataType"); if(dataType == "string"){ arr.sort(TableUtils.compareString); }else if(dataType == "number"){ arr.sort(TableUtils.compareNumber); }else if(dataType == "date"){ arr.sort(TableUtils.compareDate); } //获取排序的方式顺序或者降序 var order = e.target.getAttribute("order"); if(order == "ASC"){ //降序则通过reverse方法倒置结果 arr.reverse(); e.target.setAttribute("order","DESC"); }else{ e.target.setAttribute("order","ASC"); } //创建dom节点集插入到tbody中完成排序 var frag = document.createDocumentFragment(); for(var i=0;i<=arr.length-1;i++){ //插入所有tr节点 frag.appendChild(arr[i].parentNode); } tb.tBodies[0].appendChild(frag); }; if(x>=(ths.length-1)) break; } }; TableUtils.compareString = function(p1,p2){ var pV1 = p1.firstChild.nodeValue; var pV2 = p2.firstChild.nodeValue; return pV1.localeCompare(pV2); }; TableUtils.compareNumber = function(p1,p2){ var pV1 = p1.firstChild.nodeValue; var pV2 = p2.firstChild.nodeValue; if(pV1 > pV2){ return 1; }else if(pV1 == pV2){ return 0; }else{ return -1; } }; TableUtils.compareDate = function(p1,p2){ var pV1 = p1.firstChild.nodeValue; var pV2 = p2.firstChild.nodeValue; var ymd1 = pV1.split("-"); var ymd2 = pV2.split("-"); if(ymd1[0] > ymd2[0] || (ymd1[0] == ymd2[0] && ymd1[1] > ymd2[1]) || (ymd1[0] == ymd2[0] && ymd1[1] == ymd2[1] && ymd1[2] > ymd2[2])){ return 1; }else if(ymd1[0] == ymd2[0] && ymd1[1] == ymd2[1] && ymd1[2] == ymd2[2]){ return 0; }else{ return -1; } return -1; };
具体代码实现,见注释。这样即使在加一列,只要指定了dataType(string,number或者date类型)就可以进行排序了。
下面是书上的例子
<html>
<head>
<title>Table Sort Example</title>
<script type="text/javascript">
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();
}
}
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];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
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;
}
</script>
</head>
<body>
<p>Click on the table header to sort in ascending order.</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th οnclick="sortTable('tblSort', 0)"
style="cursor:pointer">Last Name</th>
<th οnclick="sortTable('tblSort', 1)"
style="cursor:pointer">First Name</th>
<th οnclick="sortTable('tblSort', 2, 'date')"
style="cursor:pointer">Birthday</th>
<th οnclick="sortTable('tblSort', 3, 'int')"
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>
个人感觉把事件监听也封装到js里比较好,便于扩展,而且也减少html的代码毕竟html是主要负责做展现的不应有太多的逻辑事件处理。