1、在页面中引入风格单定义

<style>

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

</style>

2、在需要锁定行列头的表格定义中添加语句“class=lockheadtable”就ok了，其他参数有

rowheadnum=锁定行数

colheadnum=锁定列数

rowheadstyle=行表头风格

colheadstyle=列表头风格

rowstyle=行风格1|行风格2|……|行风格n

focusstyle=获得鼠标焦点时的风格

3、点击行标题时可以对数据进行排序

注意：

使用本组件时，行表头中的单元格不允许跨行

例：

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

//设置行表头

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;

}

//设置列表头

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

}

}

//设置行标题排序

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>