<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>
将来页面里面调用如下:1.<style> .LockHeadTable {behavior:url(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">
