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

转载 2006年05月20日 01:05:00
 

当报表比较大时,在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='tdrow' colspan='3' width='300'>字段06</td>
 <td class='tdrow' colspan='3' width='300'>字段07</td>
 <td class='tdrow' rowspan='2' width='100'>字段08</td>
</tr>
<tr heigth='20'>
 <td class='tdrow' width='100'>字段01</td>
 <td class='tdrow' width='100'>字段02</td>
 <td class='tdrow' width='100'>字段03</td>
 <td class='tdrow' width='100'>字段04</td>
 <td class='tdrow' width='100'>字段05</td>
 <td class='tdrow' width='100'>字段06</td>
 <td class='tdrow' width='100'>字段07</td>
 <td class='tdrow' width='100'>字段08</td>
 <td class='tdrow' width='100'>字段09</td>
 <td class='tdrow' width='100'>字段10</td>
 <td class='tdrow' width='100'>字段11</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
</table>
</body>
</html>

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

当报表比较大时,在Web上查看内容会很不方便,如果可以象Excel那样锁定报表的行头和列头就好了……最近闲着没事,写了个锁定报表行头和列头的组件,用法也挺简单:1、在页面中引入风格单定义.LockHe...
  • HStone
  • HStone
  • 2005年01月19日 11:33
  • 1330

多层头,多列头,合并列头,双列头

DataGridView 的功能确实很强大,但有小小的不足如:网格尾统计,多层列头。几经研究不但实现了这此功能,同时也支持冻结和拖动列。列头可以实现任意多层。可以直接应用到商用软件开发中。非常容易使用...
  • dj688
  • dj688
  • 2008年07月01日 11:04
  • 581

锁定行头和列头的表格组件 v2.0

学到新东西了,对组件进行了修改,简化程序,增加功能。1、在页面中引入风格单定义.LockHeadTable {behavior:url(LockHeadTable.htc)}2、在需要锁定行列头的表格...
  • HStone
  • HStone
  • 2005年03月04日 09:42
  • 1250

固定行表头,固定列的html

固定行表头,固定列的htmlCSS文件.result {...}{}.result .records td,.result .records th {...}{    padding: 3px;   ...
  • tyouvivi
  • tyouvivi
  • 2008年02月08日 16:10
  • 2958

JQuery 列表做到列锁定+表头锁定+列组合

摘要: 前几个月,客户要求显示列表做到列锁定+表头锁定+列组合,但从Extjs到Jquery EasyUi,从Jquery Grid到Telerik等等组件,发现无一符合条件,要么只有列锁定,要么只有...
  • Trassion
  • Trassion
  • 2012年11月06日 22:03
  • 14828

如何禁止改变datagirdview列头宽度和行头高度

this.datagridview.ColumnHeaderHeightSizeMod
  • GAMEloft9
  • GAMEloft9
  • 2014年05月28日 09:59
  • 1068

改变datagridview行头图标

private void dataGridView2_RowPostPaint(object sender, DataGridViewRowPostPaintEventArgs e) { ...
  • anyqu
  • anyqu
  • 2012年12月21日 13:37
  • 2496

DataGridView 自动在行头添加行号

DataGridView 自动在行头添加行号         ///         /// 添加行号         ///         ///         /// ...
  • anyqu
  • anyqu
  • 2012年12月08日 21:30
  • 3097

Ext实现表格列头冻结效果,锁定列头

这段时间我们的项目中采用了Coolite来做富客户端,Coolite目前的版本是0.8.1,它所采用的Ext版本是2.2.1,因此下面主要是说明在这个版本下所实现的锁定列和多行表头,需要说明的是Ext...
  • e_wsq
  • e_wsq
  • 2013年09月08日 18:26
  • 2741

怎样实现handsontable双击修改列头(how to modify colheaders)

最近使用handsontable进行表格的编辑和展示,不得不说,该控件真心好用,界面友好且功能强大,在使用过程中,有这样一个问题:如何双击实现列头的编辑? 首先,我们查看handsontable的官方...
  • u012414590
  • u012414590
  • 2016年10月17日 19:30
  • 1591
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: 锁定行头和列头的表格组件
举报原因:
原因补充:

(最多只允许输入30个字)