分享锁定行头和列头的表格组件

1、在页面中引入风格单定义
<style>
.LockHeadTable{behavior:url(/oblog312/LockHeadTable.htc)}
</style>


2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable"”就OK了，其他参数有
ROWHEADNUM="锁定行数"
COLHEADNUM="锁定列数"
ROWHEADSTYLE="行表头风格"
COLHEADSTYLE="列表头风格"
ROWSTYLE="行风格1|行风格2|……|行风格n"
FOCUSSTYLE="获得鼠标焦点时的风格"

3、点击行标题时可以对数据进行排序

注意：
使用本组件时，行表头中的单元格不允许跨行

例：
<tableclass="LockHeadTable"ROWHEADNUM=3COLHEADNUM=1ROWHEADSTYLE="background:#F7F7F7;color:black;"COLHEADSTYLE="background:#F7F7F7;color:black;"ROWSTYLE="background:#FFFFFF;color:black;|background:#F7F7F7;color:black;"FOCUSSTYLE="background:green;color:white;"width="1500"border="1"cellpadding="3"cellspacing="0"align="center">

源代码：

LockHeadTable.htc(组件程序)





<PUBLIC:COMPONENT>

<PUBLIC:PROPERTYNAME="ROWHEADNUM"/>
<PUBLIC:PROPERTYNAME="COLHEADNUM"/>
<PUBLIC:PROPERTYNAME="ROWHEADSTYLE"/>
<PUBLIC:PROPERTYNAME="COLHEADSTYLE"/>
<PUBLIC:PROPERTYNAME="ROWSTYLE"/>
<PUBLIC:PROPERTYNAME="FOCUSSTYLE"/>

<script>
//初始化
ROWHEADNUM=(ROWHEADNUM==null?0:parseInt(ROWHEADNUM,10));
COLHEADNUM=(COLHEADNUM==null?0:parseInt(COLHEADNUM,10));
ROWHEADSTYLE=(ROWHEADSTYLE==null?"":ROWHEADSTYLE);
COLHEADSTYLE=(COLHEADSTYLE==null?"":COLHEADSTYLE);

arrRowStyle=(ROWSTYLE==null?newArray(""):ROWSTYLE.split("|"));

//设置行表头
vari,j,rowItem,cellItem;
rowHead=element.cloneNode(true);
for(i=0;i<ROWHEADNUM;i++){
rowItem=element.rows(i);
rowItem.style.cssText='z-index:10;position:relative;top:expression(this.offsetParent.scrollTop);'+ROWHEADSTYLE;
}

//设置列表头
for(i=0;i<element.rows.length;i++){
rowItem=element.rows(i);
if(i>=ROWHEADNUM){
rowItem.style.cssText="position:relative;"+arrRowStyle[(i-ROWHEADNUM)%arrRowStyle.length];
if(FOCUSSTYLE!=null){
rowItem.onmouseover=function(){this.style.cssText="position:relative;"+FOCUSSTYLE;}
rowItem.onmouseout=function(){this.style.cssText="position:relative;"+arrRowStyle[(this.rowIndex-ROWHEADNUM)%arrRowStyle.length];}
}
}

for(j=0;j<COLHEADNUM;j+=cellItem.colSpan){
cellItem=rowItem.cells(j);
cellItem.style.cssText='position:relative;left:expression(this.parentElement.offsetParent.scrollLeft);'
+(i<ROWHEADNUM?'':COLHEADSTYLE);
}
}

//设置行标题排序
for(i=0;i<ROWHEADNUM;i++){
rowItem=element.rows(i);
for(j=0;j<rowItem.cells.length;j++){
cellItem=rowItem.cells(j);
if(cellItem.rowSpan==ROWHEADNUM-i){
cellItem.style.cursor="hand";
cellItem.sortAsc=true;
cellItem.onclick=sortTable;
}
}
}

//排序
functionsortTable(){
varobjCol=event.srcElement;
if(objCol.tagName=="TD"){
varintCol=objCol.cellIndex;
objCol.sortAsc=!objCol.sortAsc;

sort_type='Num';
if(isNaN(parseInt(element.rows(ROWHEADNUM).cells(intCol).innerText,10)))
sort_type='Asc';

vari,j,boltmp;
for(i=ROWHEADNUM;i<element.rows.length;i++)
for(j=i+1;j<element.rows.length;j++){
switch(sort_type){
case'Num':
boltmp=(parseInt(element.rows(i).cells(intCol).innerText,10)>=parseInt(element.rows(j).cells(intCol).innerText,10));
break;
case'Asc':
default:
boltmp=(element.rows(i).cells(intCol).innerText>=element.rows(j).cells(intCol).innerText);
}
if((objCol.sortAsc&&!boltmp)||(!objCol.sortAsc&&boltmp)){
element.moveRow(j,i);
}
}
}
}
</script>
</PUBLIC:COMPONENT>

本文地址：http://www.45fan.com/a/question/12812.html