1、在頁(yè)面中引入風(fēng)格單定義
<style>
.lockheadtable {behavior:url(/oblog312/lockheadtable.htc)}
</style>
2、在需要鎖定行列頭的表格定義中添加語(yǔ)句“class=lockheadtable”就ok了，其他參數(shù)有
rowheadnum=鎖定行數(shù)
colheadnum=鎖定列數(shù)
rowheadstyle=行表頭風(fēng)格
colheadstyle=列表頭風(fēng)格
rowstyle=行風(fēng)格1|行風(fēng)格2|……|行風(fēng)格n
focusstyle=獲得鼠標(biāo)焦點(diǎn)時(shí)的風(fēng)格
3、點(diǎn)擊行標(biāo)題時(shí)可以對(duì)數(shù)據(jù)進(jìn)行排序
注意：
使用本組件時(shí)，行表頭中的單元格不允許跨行
例：
<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>
源代碼：
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è)置行標(biāo)題排序
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>