|
锁定老帖子 主题：简单的JavaScript表格排序
精华帖 (0) :: 良好帖 (0) :: 新手帖 (14) :: 隐藏帖 (2)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-03-05
自己写的一个HTML表格排序的程序，由于是自己写的，所以比较土，况且没有使用任何JavaScript库，所以只实现了一些简单的功能。主要是了解一下原理。
function ieOrFireFox(ob) {
if (ob.textContent != null)
return ob.textContent;
var s = ob.innerText;
return s.substring(0, s.length);
}
function sortTableByColumn(sortTableId,iCol,dataType){
var sortTable = document.getElementById(sortTableId);
var tbody = sortTable.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array;
var sortedHeader = sortTable.tHead.rows[0].cells[iCol];
for (var i = 0; i < colRows.length; i++) {
aTrs[i] = colRows[i];
}
if (sortTable.sortCol == iCol) {
if (sortTable.sortOrder == "desc") {
aTrs.sort(compareEle(iCol, dataType,'asc'));
sortTable.sortOrder = "asc";
} else {
aTrs.sort(compareEle(iCol, dataType,'desc'));
sortTable.sortOrder = "desc";
}
} else {
aTrs.sort(compareEle(iCol, dataType,'asc'));
sortTable.sortOrder = "asc";
}
sortTable.sortCol = iCol;
var oFragment = document.createDocumentFragment();
for ( var i = 0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
}
function sortTable(tableId,thobj,dataType) {
var iCol = document.getElementById(thobj).cellIndex;
sortTableByColumn(tableId,iCol,dataType);
}
function convert(sValue, dataType,sortDerection) {
switch (dataType) {
case "int":
if(sValue.length <= 0){
if(sortDerection == "asc") {
sValue = "1000";
} else {
sValue = "-1";
}
}
return parseInt(sValue, 10);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString().toLowerCase();
}
}
function compareEle(iCol, dataType,sortDerection) {
return function(oTR1, oTR2) {
var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType,sortDerection);
var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType,sortDerection);
var returnResult = 0;
if (vValue1 < vValue2) {
returnResult = -1;
} else if (vValue1 > vValue2) {
returnResult = 1;
} else {
returnResult = 0;
}
if(sortDerection == "desc"){
return -returnResult;
} else {
return returnResult;
}
};
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Table Sort Example</title>
<script type="text/javascript" src="sortTable.js" > </script>
</head>
<body>
<p>Click on the table header to sort in ascending order.</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTableByColumn('tblSort',0)" style="cursor:pointer">Last Name</th>
<th onclick="sortTableByColumn('tblSort',1,'date')" style="cursor:pointer">Date</th>
<th onclick="sortTableByColumn('tblSort',2,'float')" style="cursor:pointer">Salary</th>
<th onclick="sortTableByColumn('tblSort',3,'int')" style="cursor:pointer">Age</th>
<th onclick="sortTableByColumn('tblSort',3,'int')" style="cursor:pointer">ChineseName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>2008/9/20</td>
<td>100.03</td>
<td>20</td>
<td>我</td>
</tr>
<tr>
<td>Johnson</td>
<td>2008/10/4</td>
<td>200.8</td>
<td>18</td>
<td>爱</td>
</tr>
<tr>
<td>Henderson</td>
<td>2008/10/11</td>
<td>50.3</td>
<td>45</td>
<td>北</td>
</tr>
<tr>
<td>Williams</td>
<td>2008/10/08</td>
<td>50</td>
<td>20</td>
<td>京</td>
</tr>
<tr>
<td>Gilliam</td>
<td>2008/10/3</td>
<td>400.2</td>
<td>9</td>
<td>故</td>
</tr>
<tr>
<td>Walker</td>
<td>2008/11/4</td>
<td>20.6</td>
<td>20</td>
<td>宫</td>
</tr>
</tbody>
</table>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-03-05
不错，我也写过一个table排序
多多交流 |
| 返回顶楼 | |
|
发表时间：2010-03-05
|
| 返回顶楼 | |
|
发表时间：2010-03-05
最后修改：2010-03-05
asialee 写道
最简单的表格排序是这样的： http://www.iteye.com/topic/567161 # sort:function(list, inc){
# $("sort").className = inc?"down":"up";
# list.sort(function(a, b){
# return (inc?1:-1)*a.name.localeCompare(b.name);
# });
# render(data);
# },
|
| 返回顶楼 | |
|
发表时间：2010-03-05
jindw 写道 asialee 写道
最简单的表格排序是这样的： http://www.iteye.com/topic/567161 # sort:function(list, inc){
# $("sort").className = inc?"down":"up";
# list.sort(function(a, b){
# return (inc?1:-1)*a.name.localeCompare(b.name);
# });
# render(data);
# },
localeCompare只能判断字符 |
| 返回顶楼 | |
|
发表时间：2010-03-05
楼主 Nicholas C.Zakas Professional java script for web Developers Nicholas C.Zakas的js教材书可是很出名的额，看的人不比犀牛书少 |
| 返回顶楼 | |
|
发表时间：2010-03-05
刃之舞 写道
楼主 Nicholas C.Zakas Professional java script for web Developers Nicholas C.Zakas的js教材书可是很出名的额，看的人不比犀牛书少 什么意思？ |
| 返回顶楼 | |
|
发表时间：2010-03-05
lz怎么没有注释的
|
| 返回顶楼 | |
|
发表时间：2010-03-06
ving0099 写道 lz怎么没有注释的
我编写JS没有养成好习惯，一般会忘记加上注释，以后会注意的。 |
| 返回顶楼 | |
|
发表时间：2010-03-08
asialee 写道 刃之舞 写道
楼主 Nicholas C.Zakas Professional java script for web Developers Nicholas C.Zakas的js教材书可是很出名的额，看的人不比犀牛书少 什么意思？
<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 onclick="sortTable('tblSort', 0)"
style="cursor:pointer">Last Name</th>
<th onclick="sortTable('tblSort', 1)"
style="cursor:pointer">First Name</th>
<th onclick="sortTable('tblSort', 2, 'date')"
style="cursor:pointer">Birthday</th>
<th onclick="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>
书上的例子代码，大体上没觉出跟你的有什么不同 |
| 返回顶楼 | |
