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

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;}