鎖定行頭和列頭的表格組件

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