|
|
Posted on 2006-03-09 00:07 大大毛 閱讀(1136) 評論(0) 編輯 收藏 所屬分類: HTML
???特點:
???1.實現(xiàn)表格的自助排序,適用范圍很大的,比如生成一張數(shù)據(jù)表,用這個可以讓用戶按自己的方式進行排序,由于是本地JS,所以可以節(jié)省連接資源;
???2.網(wǎng)絡上此類例子也比較多,但是很多并沒有考慮到"排序規(guī)則"的問題,很多時候JS使用的是字符排序;
??????從例子中可以看出,在應用中對于字符類型與數(shù)據(jù)類型的排序應該使用不同的排序規(guī)則
???說明:
??????表單里面放了一個"參數(shù)顯示",配合HTML源碼,比較容易理解一些;
??????放在這里,是為了以后工作中好用,因此第2個表實現(xiàn)了滾動表的效果,隨便把時間也放上去了,嘻
源碼:
  HTML源碼
 <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">
<HTML>
<HEAD>
<TITLE>?表格排序?</TITLE>
<script>
  function?orderByCol(td,fixRows)?{
????/**//*
 ????//td:排序的關(guān)鍵列
????//fixRows:固定行數(shù)
 ????*/
????var?colIndex?=?td.cellIndex;
????var?tr?=?td.parentElement;
????var?table?=?tr.parentElement;
????if(table.tagName?!=?"TABLE")
????????table?=?table.parentElement;
????if(fixRows?==?undefined)
????????fixRows?=?0;
????//在此自動判定該列類型:如果是數(shù)字則為數(shù)字,否則為文本.即"200"為認為是數(shù)字
????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:排序的關(guān)鍵列
????//fixRows:固定行數(shù)
????//asc:升序排列(0--降序;否則缺省為升序)
????//compareType:比較類型(0--數(shù)值;否則缺省為文本)
????//WARING:
????//????compareType參數(shù)的指定非常重要,如果缺省則以文本方式進行比較,如果是一數(shù)字型的列則會產(chǎn)生錯誤
????*/
????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);
????//取出相關(guān)列的值,在此示例了一種從單元格中取值的方法,如果單元格中沒有包含任何子元素,則直接取單元格的文本,否則取第一個子元素的值
????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;
????????//根據(jù)對比類型進行轉(zhuǎn)型
????????if(compareType?==?0)?{
????????????value[i]?=?Number(tmp);
????????}else{
????????????value[i]?=?tmp;
????????}
????}
????//根據(jù)value中保存的值進行排序,將排序結(jié)果放至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--)?{
????????????//循環(huán)比較,引入比較方式
????????????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="行數(shù)="?+?rows?+?",關(guān)鍵列="?+?colIndex?+?",固定行數(shù)="?+?fixRows?+?",排序方式="?+?(asc==0?"降序":"升序")?+?",比較方式="?+?(compareType==0?"數(shù)字":"文本")?+?";";
????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中直接調(diào)用函數(shù)來實現(xiàn)數(shù)據(jù)表格區(qū)的排序
????????????-->
????????????<table?width="100%"?border=0?align="center"?cellspacing=0?cellpadding=0>
????????????????<tr?align="center">
????????????????????<td?ondblclick="orderTB(document.all.DataTB,0,0,0,0);">數(shù)字</td>
????????????????????<td?ondblclick="orderTB(document.all.DataTB,1,0,0,1);">數(shù)字(文本比較)</td>
????????????????????<td?ondblclick="orderTB(document.all.DataTB,2,0);">字母</td>
????????????????</tr>
????????????</table>
????????</td>
????</tr>
????<tr?bgcolor="white">
????????<td>
????????????<!--通過overflow-x:scroll/hidden;可以設置X軸向或Y軸向的滾動條是否出現(xiàn);
????????????div必須指定高度,其內(nèi)的table可通過指定高度來實現(xiàn)第一次正好顯示一行;
????????????如果滾動條出現(xiàn),寬度約為18px;
????????????為了能夠?qū)崿F(xiàn)排序,需要指定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>雙擊固定標題欄即可實現(xiàn)排序</td>
????????????????</tr>
????????????</table>
????????</td>
????</tr>
</table>
<br><br>
<font?style="font-size:10pt;">運行參數(shù)顯示:</font><input?id=show?size=90?/>
<br><br><pre?id="LastModifyTime"?title="在這里放著,省著到處去查用法"></pre>
</BODY>
<script>
????document.all.LastModifyTime.innerText?=?'最后修改時間:?'?+?getLastModifyTime();
</script>
</HTML>
|