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

最新推荐文章于 2023-02-26 15:56:54 发布

HStone

最新推荐文章于 2023-02-26 15:56:54 发布

阅读量1.7k

点赞数

文章标签： class function null behavior border 报表

本文链接：https://blog.csdn.net/HStone/article/details/259113

版权

当报表比较大时，在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
}