实现Table多类间不同类型的顺反（逆序）排序
2010-11-26 16:39
651 查看
JS如下：
TableUtil.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();
}
}
TableUtil.generateCompareTypeTRs = function(iCol,sDataType)
{
return function compareTypeTRs(oTR1,oTR2)
{
var vValue1 = TableUtil.Convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var vValue2 = TableUtil.Convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
if(vValue1<vValue2)
{
return -1;
}
else if(vValue1>vValue2)
{
return 1;
}
else
{
return 0;
}
}
}
TableUtil.sortTypeTable = function(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(TableUtil.generateCompareTypeTRs(iCol,sDataType));
}
var oFragment = document.createDocumentFragment();
for(var i = 0;i <aTRs.length;i++)
{
oFragment.appendChild(aTRs[i]);
}
oTbody.appendChild(oFragment);
oTable.sortCol = iCol;
}
HTML如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="JScript1.js" type="text/javascript"></script>
</head>
<body>
<table id="tblSort" border="1" sortCol="">
<thead >
<tr>
<th onclick="TableUtil.sortTypeTable('tblSort',0)" style="cursor:pointer">Last Name</th>
<th onclick="TableUtil.sortTypeTable('tblSort',1)" style="cursor:pointer">First Name</th>
<th onclick="TableUtil.sortTypeTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>
<th onclick="TableUtil.sortTypeTable('tblSort',3,'int')" style="cursor:pointer">Siblings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>Jhon</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/1977</td>
<td>4</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>4</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
</tr>
<tr>
<td>Vihone</td>
<td>He</td>
<td>11/5/1983</td>
<td>3</td>
</tr>
<tr>
<td>Maggie</td>
<td>Yang</td>
<td>9/23/1984</td>
<td>3</td>
</tr>
<tr>
<td>Zhiyi</td>
<td>Lin</td>
<td>12/5/1988</td>
<td>2</td>
</tr>
<tr>
<td>Alex</td>
<td>Lee</td>
<td>7/12/1984</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
TableUtil.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();
}
}
TableUtil.generateCompareTypeTRs = function(iCol,sDataType)
{
return function compareTypeTRs(oTR1,oTR2)
{
var vValue1 = TableUtil.Convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var vValue2 = TableUtil.Convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
if(vValue1<vValue2)
{
return -1;
}
else if(vValue1>vValue2)
{
return 1;
}
else
{
return 0;
}
}
}
TableUtil.sortTypeTable = function(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(TableUtil.generateCompareTypeTRs(iCol,sDataType));
}
var oFragment = document.createDocumentFragment();
for(var i = 0;i <aTRs.length;i++)
{
oFragment.appendChild(aTRs[i]);
}
oTbody.appendChild(oFragment);
oTable.sortCol = iCol;
}
HTML如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="JScript1.js" type="text/javascript"></script>
</head>
<body>
<table id="tblSort" border="1" sortCol="">
<thead >
<tr>
<th onclick="TableUtil.sortTypeTable('tblSort',0)" style="cursor:pointer">Last Name</th>
<th onclick="TableUtil.sortTypeTable('tblSort',1)" style="cursor:pointer">First Name</th>
<th onclick="TableUtil.sortTypeTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>
<th onclick="TableUtil.sortTypeTable('tblSort',3,'int')" style="cursor:pointer">Siblings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>Jhon</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/1977</td>
<td>4</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>4</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
</tr>
<tr>
<td>Vihone</td>
<td>He</td>
<td>11/5/1983</td>
<td>3</td>
</tr>
<tr>
<td>Maggie</td>
<td>Yang</td>
<td>9/23/1984</td>
<td>3</td>
</tr>
<tr>
<td>Zhiyi</td>
<td>Lin</td>
<td>12/5/1988</td>
<td>2</td>
</tr>
<tr>
<td>Alex</td>
<td>Lee</td>
<td>7/12/1984</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现Table多类不同数据类型的排序（顺反）
- 实现Table多列顺反排序(逆序）
- 【C语言】使用回调函数实现一个通用的冒泡排序，可以排序不同的数据类型。
- 模板实现冒泡（不同类型的元素）排序
- 使用回调函数实现一个通用的冒泡排序，可以排序不同的数据类型。
- 实现table单列顺反排序
- 自己实现一个bubble_sort(冒泡排序)，可以完成不同类型数据的排序
- c++ 中sort的用法 实例说明 sort是用来排序 实现不同类型的数据排序
- 反射+多态实现0判断更具不同类型排序
- 参考C语言的qsort函数实现一个一个能对任意数据类型（包括结构体）的数组进行排序的函数（里面用的不是快速排序）
- php实现扫描二维码根据浏览器类型访问不同下载地址
- IComparable接口实现自定义类型的排序
- Powershell实现按类型排序
- 如何实现将String类型数组转换成int类型 并进行排序
- Listview实现不同类型的布局
- table各行设置不同背景颜色的js实现
- 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
- JavaScript中不同类型数据的排序方法
- 【PHP内核】语法：不同类型之间数值运算的实现
- ASP.Net MVC+Data Table实现分页+排序功能的方法