亚洲日日做天天做日日谢,久久久久亚洲AV无码永不,亚洲人成网站免费播放

表格排序,實現固定行以及文件/數值排序

Posted on 2006-03-09 00:07 大大毛閱讀(1133) 評論(0) 編輯收藏所屬分類: HTML

<HTML>
<HEAD>
<TITLE> 表格排序 </TITLE>
<script>
function orderByCol(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;
	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) {
	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;
		}
	}
	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>
			<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>
			<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>

???特點:
???1.實現表格的自助排序,適用范圍很大的,比如生成一張數據表,用這個可以讓用戶按自己的方式進行排序,由于是本地JS,所以可以節省連接資源;
???2.網絡上此類例子也比較多,但是很多并沒有考慮到"排序規則"的問題,很多時候JS使用的是字符排序;
??????從例子中可以看出,在應用中對于字符類型與數據類型的排序應該使用不同的排序規則

???說明:
??????表單里面放了一個"參數顯示",配合HTML源碼,比較容易理解一些;
??????放在這里,是為了以后工作中好用,因此第2個表實現了滾動表的效果,隨便把時間也放上去了,嘻

源碼:

HTML源碼

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 表格排序,實現固定行以及文件/數值排序 Checkbox聯動,一個部門員工的簡單例子 Checkbox聯動演示

大大毛的筆記
DDM's Note

大大毛的筆記

DDM's Note

哪怕沒有辦法一定有說法,
就算沒有鴿子一定有烏鴉,
固執無罪夢想有價,
讓他們驚訝.

表格排序,實現固定行以及文件/數值排序

日歷

公告

隨筆分類(4)

文章分類(59)

積分與排名

最新評論

i am ddm

大大毛 的筆記 DDM's Note

大大毛 的筆記

DDM's Note

哪怕沒有辦法一定有說法, 就算沒有鴿子一定有烏鴉, 固執無罪 夢想有價, 讓他們驚訝.

表格排序,實現固定行以及文件/數值排序

日歷

公告

隨筆分類(4)

文章分類(59)

積分與排名

最新評論

i am ddm

大大毛的筆記
DDM's Note

大大毛的筆記

哪怕沒有辦法一定有說法,
就算沒有鴿子一定有烏鴉,
固執無罪夢想有價,
讓他們驚訝.