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

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>