|
|
Posted on 2006-03-09 00:07 大大毛 阅读(1124) 评论(0) 编辑 收藏 所属分类: HTML
特点:
1.实现表格的自助排序,适用范围很大的,比如生成一张数据表,用这个可以让用户按自己的方式进行排序,由于是本地JS,所以可以节省连接资源;
2.网络上此类例子也比较多,但是很多并没有考虑到"排序规则"的问题,很多时候JS使用的是字符排序;
从例子中可以看出,在应用中对于字符类型与数据类型的排序应该使用不同的排序规则
说明:
表单里面放了一个"参数显示",配合HTML源码,比较容易理解一些;
放在这里,是为了以后工作中好用,因此第2个表实现了滚动表的效果,随便把时间也放上去了,嘻
源码:
  HTML源码
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 表格排序 </TITLE>
<script>
  function orderByCol(td,fixRows) {
/**//*
 //td:排序的关键列
//fixRows:固定行数
 */
var colIndex = td.cellIndex;
var tr = td.parentElement;
var table = tr.parentElement;
if(table.tagName != "TABLE")
table = table.parentElement;
if(fixRows == undefined)
fixRows = 0;
//在此自动判定该列类型:如果是数字则为数字,否则为文本.即"200"为认为是数字
var compareType = (isNaN(table.rows[0+fixRows].cells[colIndex].innerText)?1:0);
orderTB(table,colIndex,fixRows,0,compareType);
}
function orderTB(table,colIndex,fixRows,asc,compareType) {
/**//*
//table:需要排序的table
//colIndex:排序的关键列
//fixRows:固定行数
//asc:升序排列(0--降序;否则缺省为升序)
//compareType:比较类型(0--数值;否则缺省为文本)
//WARING:
// compareType参数的指定非常重要,如果缺省则以文本方式进行比较,如果是一数字型的列则会产生错误
*/
if(asc == undefined)
asc = 1;
if(compareType == undefined)
compareType == 1;
var rows = table.rows.length;
var i,j,tmp;
var value = new Array(rows - fixRows);
//取出相关列的值,在此示例了一种从单元格中取值的方法,如果单元格中没有包含任何子元素,则直接取单元格的文本,否则取第一个子元素的值
for(i=0;i<rows - fixRows;i++) {
if(table.rows[i + fixRows].cells[colIndex].firstChild.value == undefined)
tmp = table.rows[i + fixRows].cells[colIndex].innerText;
else
tmp = table.rows[i + fixRows].cells[colIndex].firstChild.value;
//根据对比类型进行转型
if(compareType == 0) {
value[i] = Number(tmp);
}else{
value[i] = tmp;
}
}
//根据value中保存的值进行排序,将排序结果放至result中
var result = new Array(rows - fixRows);
result[0] = 0;
var set;
for(i=1;i<rows - fixRows;i++) {
//找寻插入点
set = -1;
for(j=i-1;j>=0;j--) {
//循环比较,引入比较方式
if(asc != 0) {
if((compareType == 0 && Number(value[i]) >= Number(value[result[j]])) || (compareType != 0 && String(value[i]) >= String(value[result[j]]))) {
set = j;
break;
}
}else{
if((compareType == 0 && Number(value[i]) <= Number(value[result[j]])) || (compareType != 0 && String(value[i]) <= String(value[result[j]]))) {
set = j;
break;
}
}
}
set = set + 1;
//向后挪
for(j=i-1;j>=set;j--) {
result[j+1] = result[j];
}
//插入值
result[set] = i;
}
s="行数=" + rows + ",关键列=" + colIndex + ",固定行数=" + fixRows + ",排序方式=" + (asc==0?"降序":"升序") + ",比较方式=" + (compareType==0?"数字":"文本") + ";";
s = s+ "值列=";
for(i=0;i<rows-fixRows;i++) {
s += (value[i]+";");
}
s=s+"排序="
for(i=0;i<rows-fixRows;i++) {
s += (result[i]+";");
}
document.all("show").value = s;
////排序
for(i=0;i<rows - fixRows;i++) {
if(result[i] == i) {
}else{
table.moveRow(result[i] + fixRows,i + fixRows);
//插入处理
for(j=i+1;j<rows - fixRows;j++) {
if(result[j] >= i && result[j] < result[i]) {
result[j] ++;
}
}
}
}
}
function getLastModifyTime() {
var s = "";
s = document.lastModified;
return s;
 }
</script>
<style>
table{}{font-size:9pt;}
</style>
</HEAD>
<BODY>
<table width=490 border=1 cellspacing=1 cellpadding=1>
<tr>
<th ondblclick="orderByCol(this,1);">
col1
</th>
<th ondblclick="orderByCol(this,1);">
col2
</th>
</tr>
<tr>
<td>
4
</td>
<td>
z
</td>
</tr>
<tr>
<td>
3
</td>
<td>
b
</td>
</tr>
<tr>
<td>
20
</td>
<td>
c
</td>
</tr>
<tr>
<td>
1
</td>
<td>
d
</td>
</tr>
</table>
<br><br>
<!--
在可滚动表格中示例排序
-->
<table width=490 border=0 bgcolor="6764dd" cellspacing=1 cellpadding=0>
<tr bgcolor="white">
<td>
<!--滚动表格的固定标题
通过在TD的ondblclick中直接调用函数来实现数据表格区的排序
-->
<table width="100%" border=0 align="center" cellspacing=0 cellpadding=0>
<tr align="center">
<td ondblclick="orderTB(document.all.DataTB,0,0,0,0);">数字</td>
<td ondblclick="orderTB(document.all.DataTB,1,0,0,1);">数字(文本比较)</td>
<td ondblclick="orderTB(document.all.DataTB,2,0);">字母</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="white">
<td>
<!--通过overflow-x:scroll/hidden;可以设置X轴向或Y轴向的滚动条是否出现;
div必须指定高度,其内的table可通过指定高度来实现第一次正好显示一行;
如果滚动条出现,宽度约为18px;
为了能够实现排序,需要指定table的ID,以便引用
-->
<div style="overflow:auto;width:100%;height:60px;">
<table border=0 width=462 height=120 cellspacing=0 cellpadding=2 id="DataTB">
<tr align="center">
<td width="33%">100</td>
<td width="33%">100</td>
<td width="34%">ba1</td>
</tr>
<tr align="center">
<td><input value=200 size=4 /></td>
<td><input value=200 size=4/></td>
<td>az3</td>
</tr>
<tr align="center">
<td>8</td>
<td>8</td>
<td>zz</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>AA</td>
</tr>
</table>
</div>
</td>
</tr>
<tr bgcolor="white">
<td>
<table width="100%" border=0 align="center" cellspacing=0 cellpadding=0>
<tr>
<td><b>备注:</b>双击固定标题栏即可实现排序</td>
</tr>
</table>
</td>
</tr>
</table>
<br><br>
<font style="font-size:10pt;">运行参数显示:</font><input id=show size=90 />
<br><br><pre id="LastModifyTime" title="在这里放着,省着到处去查用法"></pre>
</BODY>
<script>
document.all.LastModifyTime.innerText = '最后修改时间: ' + getLastModifyTime();
</script>
</HTML>
|