锁定行头和列头的表格组件Web服务器教程

              摘要：锁定行头和列头的表格组件

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

最近闲着没事，写了个锁定报表行头和列头的组件，用法也挺简单：
1、在页面中引入风格单定义
<style>
.LockHeadTable {behavior:url(LockHeadTable.htc)}
</style>
2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable" ROWNUM="锁定行数" COLNUM="锁定列数"”就OK了。例：
<table class="LockHeadTable" ROWNUM=2 COLNUM=3 Border='1' width='1510' style={border-collapse:collapse;table-layout:fixed}>

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

源代码：

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" />
 
 <script>
 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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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>
<table class="LockHeadTable" ROWNUM=2 COLNUM=3 Border='1' width='1510' style={border-collapse:collapse;table-layout:fixed}>
<tr height='20'>
 <td class='tdrow' rowspan='2' width='100'>字段01</td>
 <td class='tdrow' rowspan='2' width='60'>字段02</td>
 <td class='tdrow' rowspan='2' width='50'>字段03</td>
 <td class='tdrow' rowspan='2' width='100'>字段04</td>
 <td class='tdrow' colspan='5' width='500'>字段05</td>
 <td class='tdr