网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

1、在页面中引入风格单定义网站设计
<style>www.qitongnet.com
.LockHeadTable {behavior:url(LockHeadTable.htc)}网站建设
</style>

www.qitongnet.com
2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable"”就OK了，其他参数有北京网页设计
ROWHEADNUM="锁定行数"网页设计
COLHEADNUM="锁定列数"网站设计
ROWHEADSTYLE="行表头风格"网站制作
COLHEADSTYLE="列表头风格"北京网站制作
ROWSTYLE="行风格1|行风格2|……|行风格n"北京网页设计
FOCUSSTYLE="获得鼠标焦点时的风格"

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

注意：www.qitongnet.com
企通互联　　使用本组件时，行表头中的单元格不允许跨行

例： 北京网页设计网站制作
<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++) {www.qitongnet.com
  rowItem = element.rows(i);www.qitongnet.com
  rowItem.style.cssText = 'z-index:10; position:relative; top:expression(this.offsetParent.scrollTop);' + ROWHEADSTYLE;企通互联
 }企通互联
 www.qitongnet.com
 //设置列表头 www.qitongnet.com网页设计
 for (i=0; i<element.rows.length; i++) {网站设计
  rowItem = element.rows(i);北京网站建设
  if (i>=ROWHEADNUM) {www.qitongnet.com
   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);'www.qitongnet.com
    + (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';北京网站设计
   www.qitongnet.com
   var i,j,boltmp;www.qitongnet.com
   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);北京网站设计
     }www.qitongnet.com
    }网站制作
  }网站设计
 }北京网页设计
 </script>网站制作
</PUBLIC:COMPONENT>