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

1、在頁面中引入風格單定義
style>
.LockHeadTable {behavior:url(/oblog312/LockHeadTable.htc)}
/style>

2、在需要鎖定行列頭的表格定義中添加語句“class="LockHeadTable"”就OK了，其他參數(shù)有
ROWHEADNUM="鎖定行數(shù)"
COLHEADNUM="鎖定列數(shù)"
ROWHEADSTYLE="行表頭風格"
COLHEADSTYLE="列表頭風格"
ROWSTYLE="行風格1|行風格2|……|行風格n"
FOCUSSTYLE="獲得鼠標焦點時的風格"

3、點擊行標題時可以對數(shù)據(jù)進行排序

注意：
　　使用本組件時，行表頭中的單元格不允許跨行

例：
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("|"));

//設(shè)置行表頭
var i, j, rowItem, cellItem;
rowHead = element.cloneNode(true);
for (i=0; iROWHEADNUM; i++) {
  rowItem = element.rows(i);
  rowItem.style.cssText = 'z-index:10; position:relative; top:expression(this.offsetParent.scrollTop);' + ROWHEADSTYLE;
}

//設(shè)置列表頭
for (i=0; ielement.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; jCOLHEADNUM; j+=cellItem.colSpan) {
   cellItem = rowItem.cells(j);
   cellItem.style.cssText = 'position:relative; left:expression(this.parentElement.offsetParent.scrollLeft);'
    + (iROWHEADNUM?'':COLHEADSTYLE);
  }
}

//設(shè)置行標題排序
for (i=0; iROWHEADNUM; i++) {
  rowItem = element.rows(i);
  for (j=0; jrowItem.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>

巨人網(wǎng)絡(luò)通訊聲明：本文標題《鎖定行頭和列頭的表格組件》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

佳木斯湛栽影视文化发展公司

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

QQ咨詢

電話咨詢