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>