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

原创 2005年03月04日 09:42:00

学到新东西了,对组件进行了修改,简化程序,增加功能。

1、在页面中引入风格单定义
<style>
.LockHeadTable {behavior:url(LockHeadTable.htc)}
</style>


2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable"”就OK了,其他参数有
ROWHEADNUM="锁定行数"
COLHEADNUM="锁定列数"
ROWHEADSTYLE="行表头风格"
COLHEADSTYLE="列表头风格"
ROWSTYLE="行风格1|行风格2|……|行风格n"
FOCUSSTYLE="获得鼠标焦点时的风格"

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

注意:
  使用本组件时,行表头中的单元格不允许跨行,8(

例:
<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(组件程序)

<!--//
锁定行头和列头的表格组件 Version 2.0
2005年03月04日 By Stone (http://blog.csdn.net/hstone)

这段脚本可以免费使用于任何非商业用途,引用时请保留本段说明。
//-->
<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>

LockHeadTable.html(演示页面)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link href="css/css.css" rel="stylesheet" type="text/css">
<title>统计表</title>
<style>
.LockHeadTable {behavior:url(htc/LockHeadTable.htc)>
</style>
</head>

<body>
<br>
<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">
<tr>
 <td colspan="17">
  <table border="0" cellpadding="3" cellspacing="0" style="width:expression(screen.width - 300);">
  <tr><td colspan="2" align="center">统计表</td></tr>
  <tr>
   <td>统计日期:XXXX年XX月XX日——XXXX年XX月XX日</td>
   <td align="right">单位:件、元</td>
  </tr>
  </table>
 </td>
</tr>
<tr align="center">
 <td>&nbsp;</td>
 <td colspan="2">连锁店A</td>
 <td colspan="2">连锁店B</td>
 <td colspan="2">连锁店C</td>
 <td colspan="2">连锁店D</td>
 <td colspan="2">连锁店E</td>
 <td colspan="2">连锁店F</td>
 <td colspan="2">连锁店G</td>
 <td colspan="2">连锁店H</td>
</tr>
<tr align="center">
 <td>商品</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品1</td>
 <td>1</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品2</td>
 <td>2</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品3</td>
 <td>3</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品4</td>
 <td>4</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品5</td>
 <td>5</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品6</td>
 <td>6</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品7</td>
 <td>7</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品8</td>
 <td>8</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品9</td>
 <td>9</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品10</td>
 <td>10</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品11</td>
 <td>11</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
</table>

</body>
</html>

相关文章推荐

html表格中,锁定行头和列头

  • 2011年12月20日 17:06
  • 9KB
  • 下载

基于IE与css的表格行头与多层列头锁定方法(转)

从网上看到的,正好项目中用到了,就拿来一用,但是这个有一个问题,就是完成后移动滚动条会出现分隔线混乱的情况,如图所示: 红色是正常的分隔线,绿色是混乱的,要是有解决方式的,希望能留言出出主意哦。 ...

固定表头(行头列头)脚本

  • 2012年07月04日 20:48
  • 32KB
  • 下载

C# gridview 列头画表格

http://www.csframework.com/archive/2/arc-2-20110713-1691.htm 给DevExpress GridView的选择列Header添加CheckB...

asp.net2.0 gridview空数据时 仅显示列头

给GridView控件设计一个空数据模板(EmptDateTemplate)。 这个模板只在在绑定的数据项为0时才会显示。例子:   标签中间的部分,就是数据的场合, 原样显示一下列头的数据。...

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

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

锁定列头横竖滑动

  • 2014年07月17日 11:23
  • 148KB
  • 下载

ExtJS锁定列头源码

  • 2011年06月07日 22:41
  • 5KB
  • 下载

Vue 分页组件 v2.0

背景 之前也写过一个分页组件,非常简洁的一个分页组件。 效果图: 传送门 点击预览 代码也很简单,看看就懂了。当页数多起来的时候,问题也就来了。 这.......迫不得已,我把页码显示...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:锁定行头和列头的表格组件 v2.0
举报原因:
原因补充:

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