Web前端开发之——表格高级排序（字符串，日期，整型，浮点型，以及图片等）...

最新推荐文章于 2025-09-04 17:39:42 发布

kingwell2010

最新推荐文章于 2025-09-04 17:39:42 发布

阅读量162

点赞数

分类专栏： CSS HTML Javascript 文章标签： javascript表格排序 javascript javascript高级排序 ViewUI

Javascript 同时被 3 个专栏收录

33 篇文章

订阅专栏

CSS

16 篇文章

订阅专栏

HTML

16 篇文章

订阅专栏

本文介绍了一种前端实现的表格排序方法，支持多种数据类型如字符串、日期、整数及浮点数等，通过JavaScript实现了服务器功能的转移，有效减轻服务器压力。

在项目中，经常会碰表格排序，最近整理了一个表格排序包括字符串，日期，整型，浮点型，以及图片等高级排序，将服务器功能转移到前端实现，减轻了服务器压力，功能比较强大。

(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分离，这里只是为了演示而矣。