在项目中,经常会碰表格排序,最近整理了一个表格排序包括字符串,日期,整型,浮点型,以及图片等高级排序,将服务器功能转移到前端实现,减轻了服务器压力,功能比较强大。
(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分离,这里只是为了演示而矣。
分享到:
相关推荐
java 数据类型ppt 整型 浮点型 字符型 布尔型
用于串口,falsh存储转换等
C++中字符串与整型浮点型间的转换或者与其他类型之间的转换是我们经常遇到的问题,本人总结了一下网上的资源,与大家分享一下
用VC++写的关于六种排序,对整型、浮点型、字符型、字符串型排序,分别对其进行随机生成、手动输入
Python3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格单行数据为字符串.zipPython3编写实用脚本程序——拼接表格...
可以将字符串中的不同字符按比例大小排序输出
字符串排序方法 javaScript中的字符串排序。
实现 字符串,整型数据,字符型数组互相转换源码
汇编语言:实训汇编语言设计——比较两个字符串
头歌教学实践平台 Web前端开发基础 JavaScript学习手册九:字符串。源码txt格式。
一个java的字符串冒泡算法 字符串排序 字符串排序 字符串排序
创建一个类(DoubleConverter),该类的作用是将一个字符串的值转换成浮点型(double)数值。
后缀数组——处理字符串的有力工具,国家集训队论文
Public Function findstr(ByRef instring As String, after As String, before As String, rewind As Boolean) As String ’instring母串,after前面字符,before后面字符,rewind从头开始查找
判断输入的是否是浮点型,自己整理两种方法实现输入内容是否为浮点型数据
可将浮点型数据转换为字符型,如12.1;可转换为字符型12.1;稳定,逻辑直观
实例013——实现查找、替换字符串 实现查找、替换字符串 实现查找、替换字符串 实现查找、替换字符串
VB 排序 简单排序 文本框取数字排序 字符串取数字排序
对1-9位字符串进行重新排序组成新的字符串 且不重复可在NewOrder中"//此处添加条件"处添加条件