鎖定行頭和列頭的表格組件

鎖定行頭和列頭的表格組件

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>