点击表头排序的几种方法 & 动态表格
Posted royal_coffee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击表头排序的几种方法 & 动态表格相关的知识，希望对你有一定的参考价值。
我记得老早老早大家就开始在经典讨论表格排序的问题了，过了这么多年，这个问题的解决方案层出不穷，见仁见智。
用script，htc,xml+xsl等等怎么着都能实现，只是效率不同罢了。
今天正好学习.net的时候学到这一块，顺道把以前和大家讨论过的知识整理回顾并总结一下。
1， CSS+HTC(html Component)
微软的这个方法简单，在经典里面也火了一阵，下载Dave Massy做好了的组件，只需要在表格的style里面加入behavior:url(xxx.htc);就可以了.
不过这个方法有个缺点就是需要服务器端运行，在硬盘里直接运行是不管用的。而且需要IE5以后的浏览器，不支持FF等其他的。
演示：http://msdn.microsoft.com/library/en-us/dndude/html/Qual.asp
官方地址：
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude07232001.asp
2，script法
这算是目前用得比较多的一种方法了。像http://bt1.btchina.net就用的script实现的表格排序。btchina的表格排序的script源文件使用的是Erik Arvidsson(WebFX)做的一款程序叫做Sortable Table。官方有强大的技术支持。清访问http://webfx.eae.net/dhtml/tablesort/tablesort.html这款程序相对效率比较高。
演示：http://webfx.eae.net/dhtml/sortabletable/demo.html
官方地址：http://webfx.eae.net/dhtml/tablesort/tablesort.html
3，领军人物windy_sk（wind2000)的script代码．
老牌的，绝对是经典高手，在经典里掀起波澜无数．最早学习的就是他的代码．原贴：
http://www.blueidea.com/bbs/NewsDetail.asp?id=697036
4，还有一些职业高手的代码，以后继续总结．
还有菜鸟sipo用.net做的代码....（勿笑勿笑）
核心代码是：
If viewstate("sortexp") Is Nothing Then
viewstate("sortexp") = e.SortExpression.ToString
ElseIf viewstate("sortexp") = e.SortExpression.ToString Then
viewstate("sortexp") += " desc"
Else
viewstate("sortexp") = e.SortExpression.ToString
End If
感谢miles帮助！asp.net的代码终于放上来了，演示：http://www.dc9.cn/c/webform1.aspx
谢谢．．．
附：动态表格（20021118 改完）
作者-Windy2000
主要特点：
任意标准数据表格（无跨行和跨列），只要设定 id （默认为 id = PowerTable ）即可生效！
任意修改、删除、编辑、表格行列，支持拖动表头交换列；
按列中英文排序（中文排序支持拼音和笔画，500 行 中文排序 不到 3 秒！感谢 myhyli 帮助，提高了排序速度）
倒出生成精简数据表（无冗余代码）
相关显示颜色可以通过下面变量自行定制
show_col = false;
charMode = 1;
act_bgc = "#BEC5DE";
act_fc = "black";
cur_bgc = "#ccffcc";
cur_fc = "black";
ATT. 如果在较大的页面中引用，请将 window.onload 事件的内容指向 PowerTable 之后！
PS. 我的汉字排序方法和秋水的应该至少是相当的，都是引用字表，取索引位，只是没有加上拼音识别罢了，就效率上应该相当的（原理都一样）！
All Files Design & Write by Windy_sk, you can use it freely but ...
YOU MUST KEEP THIS ITEM !
Email: seasonx@163.net
-->
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > Power Table </ title >
< style >
body {
FONT-SIZE : 9pt ; PADDING-RIGHT : 0px ; PADDING-LEFT : 0px ; PADDING-BOTTOM : 0px ; PADDING-TOP : 0px ;
}
input {
FONT-SIZE : 9pt ; height : 15pt ; width : 50px ; cursor : default ;
}
table {
font-size : 9pt ;
word-break : break-all ;
cursor : default ;
BORDER : black 1px solid ;
background-color : #eeeecc ;
border-collapse : collapse ;
border-Color : #999999 ;
align : center ;
}
</ style >
< script language ="javascript1.2" >
/*
This following code are designed and writen by Windy_sk <seasonx@163.net>
You can use it freely, but u must held all the copyright items!
*/ var Main_Tab = null ;
var cur_row = null ;
var cur_col = null ;
var cur_cell = null ;
var Org_con = "" ;
var sort_col = null ; var show_col = false ;
var charMode = 1 ;
var act_bgc = " #BEC5DE " ;
var act_fc = " black " ;
var cur_bgc = " #ccffcc " ;
var cur_fc = " black " ; function init(){
cur_row = null ;
cur_col = null ;
cur_cell = null ;
sort_col = null ;
Main_Tab = PowerTable;
read_def(Main_Tab)
Main_Tab.onmouseover = overIt;
Main_Tab.onmouseout = outIt;
Main_Tab.onclick = clickIt;
Main_Tab.ondblclick = dblclickIt;
Org_con = Main_Tab.outerHTML;
arrowUp = document.createElement( " SPAN " );
arrowUp.innerHTML = " 5 " ;
arrowUp.style.cssText = " PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px " ; arrowDown = document.createElement( " SPAN " );
arrowDown.innerHTML = " 6 " ;
arrowDown.style.cssText = " PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px " ;
} function window.onload(){
init();
drag = document.createElement( " DIV " );
drag.innerHTML = "" ;
drag.style.textAlign = " center " ;
drag.style.position = " absolute " ;
drag.style.cursor = " hand " ;
drag.style.border = " 1 solid black " ;
drag.style.display = " none " ;
drag.style.zIndex = " 999 " ;
document.body.insertBefore(drag);
setInterval( " judge_move() " , 100 );
setInterval( " showContent.value=Main_Tab.innerHTML;monitor.value='cur_row: '+cur_row+'; cur_col: '+cur_col + '; sort_col: ' +sort_col " , 1000 ); sel_Mode.selectedIndex = charMode;
} function judge_move(){
move[ 0 ].disabled = (cur_row == null || cur_row <= 1 );
move[ 1 ].disabled = (cur_row == null || cur_row == Main_Tab.rows.length - 1 || cur_row == 0 );
move[ 2 ].disabled = (cur_col == null || cur_col == 0 );
move[ 3 ].disabled = (cur_col == null || cur_col == Main_Tab.rows[ 0 ].cells.length - 1 );
}document.onselectstart = function (){ return false ;}document.onmouseup = drag_end; function clear_color(){
the_table = Main_Tab;
if (cur_col != null ){
for (i = 0 ;i < the_table.rows.length;i ++ ){
with (the_table.rows[i].cells[cur_col]){
style.backgroundColor = oBgc;
style.color = oFc;
}
}
}
if (cur_row != null ){
for (i = 0 ;i < the_table.rows[cur_row].cells.length;i ++ ){
with (the_table.rows[cur_row].cells[i]){
style.backgroundColor = oBgc;
style.color = oFc;
}
}
}
if (cur_cell != null ){
cur_cell.children[ 0 ].contentEditable = false ;
with (cur_cell.children[ 0 ].runtimeStyle){
borderLeft = borderTop = "" ;
borderRight = borderBottom = "" ;
backgroundColor = "" ;
paddingLeft = "" ;
textAlign = "" ;
}
}
} function document.onclick(){
window.status = "" ;
clear_color();
cur_row = null ;
cur_col = null ;
cur_cell = null ;
} function read_def(the_table){
for ( var i = 0 ;i < the_table.rows.length;i ++ ){
for ( var j = 0 ;j < the_table.rows[i].cells.length;j ++ ){
with (the_table.rows[i]){
cells[j].oBgc = cells[j].currentStyle.backgroundColor;
cells[j].oFc = cells[j].currentStyle.color;
if (i == 0 ){
cells[j].onmousedown = drag_start;
cells[j].onmouseup = drag_end;
}
}
}
}
} function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if (the_ele.tagName.toLowerCase() == the_tag) return the_ele;
while (the_ele = the_ele.offsetParent){
if (the_ele.tagName.toLowerCase() == the_tag) return the_ele;
}
return ( null );
} var dragStart = false ;
var dragColStart = null ;
var dragColEnd = null ; function drag_start(){
var the_td = get_Element(event.srcElement, " td " );
if (the_td == null ) return ;
dragStart = true ;
dragColStart = the_td.cellIndex;
drag.style.width = the_td.offsetWidth;
drag.style.height = the_td.offsetHeight;
function document.onmousemove(){
drag.style.display = "" ;
drag.style.top = event.y - drag.offsetHeight / 2 ;
drag.style.left = event.x - drag.offsetWidth / 2 ;
for ( var i = 0 ;i < Main_Tab.rows[ 0 ].cells.length;i ++ ){
with (Main_Tab.rows[ 0 ].cells[i]){
if ((event.y > offsetTop + parseInt(document.body.currentStyle.marginTop) && event.y < offsetTop + offsetHeight + parseInt(document.body.currentStyle.marginTop)) && (event.x > offsetLeft + parseInt(document.body.currentStyle.marginLeft) && event.x < offsetLeft + offsetWidth + parseInt(document.body.currentStyle.marginLeft))){
runtimeStyle.backgroundColor = act_bgc;
dragColEnd = cellIndex;
} else {
runtimeStyle.backgroundColor = "" ;
}
}
}
if ( ! (event.y > Main_Tab.rows[ 0 ].offsetTop + parseInt(document.body.currentStyle.marginTop) && event.y < Main_Tab.rows[ 0 ].offsetTop + Main_Tab.rows[ 0 ].offsetHeight + parseInt(document.body.currentStyle.marginTop))) dragColEnd = null ;
}
drag.innerHTML = the_td.innerHTML;
drag.style.backgroundColor = the_td.oBgc;
drag.style.color = the_td.oFc;
} function drag_end(){
dragStart = false ;
drag.style.display = " none " ;
drag.innerHTML = "" ;
drag.style.width = 0 ;
drag.style.height = 0 ;
for ( var i = 0 ;i < Main_Tab.rows[ 0 ].cells.length;i ++ ){
Main_Tab.rows[ 0 ].cells[i].runtimeStyle.backgroundColor = "" ;
}
if (dragColStart != null && dragColEnd != null && dragColStart != dragColEnd){
change_col(Main_Tab,dragColStart,dragColEnd);
if 记录Element 表格动态表头及数据
miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题