1、在頁面中引入風格單定義

<style>

.LockHeadTable {behavior:url(/oblog312/LockHeadTable.htc)}

</style>

2、在需要鎖定行列頭的表格定義中添加語句“class="LockHeadTable"”就OK了，其他參數(shù)有

ROWHEADNUM="鎖定行數(shù)"

COLHEADNUM="鎖定列數(shù)"

ROWHEADSTYLE="行表頭風格"

COLHEADSTYLE="列表頭風格"

ROWSTYLE="行風格1|行風格2|……|行風格n"

FOCUSSTYLE="獲得鼠標焦點時的風格"

3、點擊行標題時可以對數(shù)據(jù)進行排序

注意：

　　使用本組件時，行表頭中的單元格不允許跨行

例：

<table class="LockHeadTable" ROWHEADNUM=3 COLHEADNUM=1 ROWHEADSTYLE="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:PROPERTY NAME="ROWHEADNUM" />

<PUBLIC:PROPERTY NAME="COLHEADNUM" />

<PUBLIC:PROPERTY NAME="ROWHEADSTYLE" />

<PUBLIC:PROPERTY NAME="COLHEADSTYLE" />

<PUBLIC:PROPERTY NAME="ROWSTYLE" />

<PUBLIC:PROPERTY NAME="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?new Array(""):ROWSTYLE.split("|"));

//設(shè)置行表頭

var i, 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;

}

//設(shè)置列表頭

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

}

}

//設(shè)置行標題排序

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;

}

}

}

//排序

function sortTable() {

var objCol = event.srcElement;

if (objCol.tagName == "TD") {

var intCol = objCol.cellIndex;

objCol.sortAsc = !objCol.sortAsc;

sort_type = 'Num';

if (isNaN(parseInt(element.rows(ROWHEADNUM).cells(intCol).innerText, 10)))

sort_type = 'Asc';

var i,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>

更多信息請查看IT技術(shù)專欄