锁定行头和列头的表格组件

当报表比较大时，在Web上查看内容会很不方便，如果可以象Excel那样锁定报表的行头和列头就好了……

最近闲着没事，写了个锁定报表行头和列头的组件，用法也挺简单：

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

<style>

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

</style>

2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable" ROWNUM="锁定行数" COLNUM="锁定列数"”就OK了。例：

忘说了，在点击行标题时可以对数据进行排序的。

源代码：

LockHeadTable.htc(组件程序)

<!--//

锁定行头和列头的表格组件 Version 1.0

2005年01月19日 By Stone (http://blog.csdn.net/hstone)

这段脚本可以免费使用于任何非商业用途，引用时请保留本段说明。

//-->

<PUBLIC:COMPONENT>

<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="DoInit()" />

<PUBLIC:PROPERTY NAME="ROWNUM" />

<PUBLIC:PROPERTY NAME="COLNUM" />

var rowHead = null, colHead = null;

function DoInit() {

ROWNUM = (ROWNUM==null?0:parseInt(ROWNUM, 10));

COLNUM = (COLNUM==null?0:parseInt(COLNUM, 10));

var i, j;

//复制行表头

rowHead = element.cloneNode(true);

for (i=ROWNUM; i<rowHead.rows.length;)

rowHead.deleteRow(ROWNUM);

//alert(rowHead.outerHTML);

//复制列表头

colHead = element.cloneNode(true);

for (i=0; i<ROWNUM; i++)

colHead.deleteRow(0);

for (i=0; i<colHead.rows.length; i++) {

rowItem = colHead.rows(i);

for (j=COLNUM; j<rowItem.cells.length;)

rowItem.deleteCell(rowItem.cells.length - 1);

}

//alert(colHead.outerHTML);

//设置行表头属性

rowHead.id += rowHead.uniqueID;

rowHead.className = "";

rowHead.style.position = "absolute";

rowHead.style.top = getPosTop(element);

rowHead.style.left = getPosLeft(element);

//设置行标题排序

for (i=0; i<ROWNUM; i++) {

rowItem = rowHead.rows(i);

for (j=0; j<rowItem.cells.length; j++) {

cellItem = rowItem.cells(j);

if (cellItem.rowSpan==ROWNUM-i) {

cellItem.style.cursor = "hand";

cellItem.sortAsc = true;

cellItem.onclick = sortTable;

}

//计算、设置列表头属性

var colHeadWidth = 0;

var rowItem = element.rows(ROWNUM);

for (i=0; i<colHead.rows.length; i++) {

colHeadWidth = 0;

for (j=0; j<COLNUM; j++) {

colHeadWidth += parseInt(rowItem.cells(j).offsetWidth, 10);

colHead.rows(i).cells(j).style.width = rowItem.cells(j).offsetWidth;

}

colHead.id += colHead.uniqueID;

colHead.className = "";

colHead.style.width = colHeadWidth;

colHead.style.position = "absolute";

colHead.style.top = getPosTop(element.rows(ROWNUM));

colHead.style.left = getPosLeft(element);

//添加表头对象

parent.document.body.appendChild(colHead);

parent.document.body.appendChild(rowHead);

//增加body滚动事件处理

parent.document.body.onscroll = bodyonscroll;

}

//body滚动事件处理

function bodyonscroll() {

var bodyscrolltop = parseInt(parent.document.body.scrollTop, 10),

bodyscrollleft = parseInt(parent.document.body.scrollLeft, 10),

elementtop = getPosTop(element),

elementleft = getPosLeft(element),

elementwidth = parseInt(element.offsetWidth, 10),

elementheight = parseInt(element.offsetHeight, 10);

rowHead.style.top = elementtop + ((bodyscrolltop>elementtop && bodyscrolltop<elementtop + elementheight)?bodyscrolltop:0);

colHead.style.left = elementleft + ((bodyscrollleft>elementleft && bodyscrollleft<elementleft + elementwidth)?bodyscrollleft:0);

}

//获取HTML对象在窗口中的位置，左边距(对象无offsetParent返回值是null)

function getPosLeft(obj) {

return ((obj==null)?0:parseInt(obj.offsetLeft) + getPosLeft(obj.offsetParent));

}

//获取HTML对象在窗口中的位置，顶距((对象无offsetParent返回值是null)

function getPosTop(obj) {

return (obj==null)?0:parseInt(obj.offsetTop) + getPosTop(obj.offsetParent);

}

//排序

function sortTable() {

var objCol = event.srcElement;

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

var intCol = objCol.cellIndex;

objCol.sortAsc = !objCol.sortAsc;

var i,j,boltmp;

for (i = ROWNUM; i < element.rows.length; i++)

for (j = i + 1; j < element.rows.length; j++) {

boltmp = (element.rows(i).cells(intCol).innerText >= element.rows(j).cells(intCol).innerText);

if ((objCol.sortAsc && !boltmp) || (!objCol.sortAsc && boltmp)) {

element.moveRow(j, i);

colHead.moveRow(j - ROWNUM, i - ROWNUM);

}

</script>

</PUBLIC:COMPONENT>

LockHeadTable.html(演示页面)

<html>

<head>

<title>LockHeadTableDemo</title>

<style>

TD {

font-family:宋体;

font-size:13px;

text-align:right

}

TD.tdrow {

font-family:宋体;

color:#993300;

background-color:#FFF8DC;

font-size:14px;

text-align:center;

vertical-align:bottom

}

TD.tdcol {

font-family:宋体;

color:blue;

background-color:#FFF8DC;

font-size:14px;

text-align:left

}

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

</style>

</head>

<body>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</body>

</html>