脚本专栏 
首页 > 脚本专栏 > 浏览文章

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

(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )
1、在页面中引入风格单定义
<style>
.LockHeadTable {behavior:url(/oblog312/LockHeadTable.htc)}
</style>


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

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

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

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





<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> 

上一篇:用htc实现CHECKBOX控件
下一篇:Web上功能强大的DbGrid表格HTC组件[只需在Table中指定样式就可以完成多种功能可扩展]
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。