1、 锁定行头和列头的表格组件1、在页面中引入风格单定义 style .LockHeadTable behavior:url(/oblog312/LockHeadTable.htc) /style 2、在需要锁定行列头的表格定义中添加语句“class=“LockHeadTable“”就 OK 了，其他参数有 ROWHEADNUM=“锁定行数“ COLHEADNUM=“锁定列数“ ROWHEADSTYLE=“行表头风格“ COLHEADSTYLE=“列表头风格“ ROWSTYLE=“行风格 1|行风格 2|行风格 n“ FOCUSSTYLE=“获得鼠标焦点时的风格“ 3、点击行标题时可以对数据进行排
2、序 注意： 使用本组件时，行表头中的单元格不允许跨行 例： 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;“
3、 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“ /
4、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 A
5、rray(“):ROWSTYLE.split(“|“); /设置行表头 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; /设置列表头 for (i=0; ielement.rows
6、.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 ()
7、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?:
8、COLHEADSTYLE); /设置行标题排序 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 objCo
9、l = 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;
10、 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
