在项目中,经常会碰表格排序,最近整理了一个表格排序包括字符串,日期,整型,浮点型,以及图片等高级排序,将服务器功能转移到前端实现,减轻了服务器压力,功能比较强大。
(function () { /** @ Author: Kingwell leng @ Date : 2012-8-22 @ Blog : http://kingwell-leng.iteye.com/ @ Email : jinhua.leng##gmail.com */ //创建闭包以及下面的空间命名,避免项目开发中与其它内容有冲突 if (!window.kw) { window.kw = {}; }; kw = { convert : function (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(); } }, geterateCompareTRs : function (iCol, sDataType) { //比较函数,用于sort排序用 return function compareTRs(oTR1, oTR2) { var vValue1, vValue2; if (oTR1.cells[iCol].getAttribute("value")) { //用于高级排序,比如图片,添加一个额外的属性来排序 vValue1 = kw.convert(oTR1.cells[iCol].getAttribute("value"), sDataType); vValue2 = kw.convert(oTR2.cells[iCol].getAttribute("value"), sDataType); } else { vValue1 = kw.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); vValue2 = kw.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); } if (vValue1 < vValue2) { return -1; } else if (vValue1 > vValue2) { return 1; } else { return 0; } } }, tabSort : function (sTableID, iCol, sDataType) { //排序函数,sTableID为目标,iCol哪列排序,为必需,sDataType可选 var oTable = document.getElementById(sTableID); var oTBody = oTable.tBodies[0]; var colDataRows = oTBody.rows; var aTRs = []; for (var i = 0; i < colDataRows.length; i++) { aTRs[i] = colDataRows[i]; }; if (oTable.sortCol == iCol) { //如果已经排序,则倒序 aTRs.reverse(); } else { aTRs.sort(this.geterateCompareTRs(iCol, sDataType)); } var oFragment = document.createDocumentFragment(); for (var j = 0; j < aTRs.length; j++) { oFragment.appendChild(aTRs[j]); }; oTBody.appendChild(oFragment); oTable.sortCol = iCol; //设置一个状态 } }; })();
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>kingwell</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body{font-family:Arial, Helvetica, sans-serif; font-size:12px}
table{ border-collapse:collapse}
td,th{padding:5px; border:1px solid #CCC; font-weight:lighter;}
th{ cursor:pointer}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table width="400" id="tab">
<thead>
<tr>
<th width="100" onclick="kw.tabSort('tab',0)">First Name</th>
<th width="100" onclick="kw.tabSort('tab',1)">Last Name</th>
<th width="100" onclick="kw.tabSort('tab',2,'date')">Date</th>
<th width="100" onclick="kw.tabSort('tab',3,'int')">Int</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kingwell</td>
<td>Leng</td>
<td>3/10/2012</td>
<td>1</td>
</tr>
<tr>
<td>1aJim</td>
<td>Green</td>
<td>3/5/2012</td>
<td>2</td>
</tr>
<tr>
<td>Kate</td>
<td>Bin</td>
<td>1/2/2012</td>
<td>3</td>
</tr>
<tr>
<td>Zte</td>
<td>Ri</td>
<td>5/3/2012</td>
<td>33</td>
</tr>
<tr>
<td>Bee</td>
<td>Dd</td>
<td>8/1/2012</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>
为了现实结构,表现,行为相分离的原则,尽量与HTML分离,这里只是为了演示而矣。