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

    1、在頁面中引入風(fēng)格單定義
    <style>
    .LockHeadTable {behavior:url(/oblog312/LockHeadTable.htc)}
    </style>
    2、在需要鎖定行列頭的表格定義中添加語句“class="LockHeadTable"”就OK了，其他參數(shù)有
    ROWHEADNUM="鎖定行數(shù)"
    COLHEADNUM="鎖定列數(shù)"
    ROWHEADSTYLE="行表頭風(fēng)格"
    COLHEADSTYLE="列表頭風(fēng)格"
    ROWSTYLE="行風(fēng)格1|行風(fēng)格2|……|行風(fēng)格n"
    FOCUSSTYLE="獲得鼠標(biāo)焦點(diǎn)時(shí)的風(fēng)格"
    3、點(diǎn)擊行標(biāo)題時(shí)可以對(duì)數(shù)據(jù)進(jìn)行排序
    注意：
    使用本組件時(shí)，行表頭中的單元格不允許跨行
    例：
    <table 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" cellpadding="3" cellspacing="0">
    源代碼：
    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; i<ROWHEADNUM; i++) {
    rowItem = element.rows(i);
    rowItem.style.cssText = 'z-index:10; position:relative; top:expression(this.offsetParent.scrollTop);' + ROWHEADSTYLE;
    }
    //設(shè)置列表頭
    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);
    }
    }
    //設(shè)置行標(biāo)題排序
    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>