1、在页面中引入风格单定义 <style> .LockHeadTable{behavior:url(/oblog312/LockHeadTable.htc)} </style> 2、在需要锁定行列头的表格定义中添加语句“class=\”LockHeadTable\””就OK了，其他参数有 ROWHEADNUM=\”锁定行数\” COLHEADNUM=\”锁定列数\” ROWHEADSTYLE=\”行表头风格\” COLHEADSTYLE=\”列表头风格\” ROWSTYLE=\”行风格1|行风格2|……|行风格n\” FOCUSSTYLE=\”获得鼠标焦点时的风格\” 3、点击行标题时可以对数据进行排序 注意： 使用本组件时，行表头中的单元格不允许跨行 例： <tableclass=\”LockHeadTable\”ROWHEADNUM=3COLHEADNUM=1ROWHEADSTYLE=\”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:PROPERTYNAME=\”ROWHEADNUM\”/> <PUBLIC:PROPERTYNAME=\”COLHEADNUM\”/> <PUBLIC:PROPERTYNAME=\”ROWHEADSTYLE\”/> <PUBLIC:PROPERTYNAME=\”COLHEADSTYLE\”/> <PUBLIC:PROPERTYNAME=\”ROWSTYLE\”/> <PUBLIC:PROPERTYNAME=\”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?newArray(\”\”):ROWSTYLE.split(\”|\”)); //设置行表头 vari,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; } } } //排序 functionsortTable(){ varobjCol=event.srcElement; if(objCol.tagName==\”TD\”){ varintCol=objCol.cellIndex; objCol.sortAsc=!objCol.sortAsc; sort_type=\’Num\’; if(isNaN(parseInt(element.rows(ROWHEADNUM).cells(intCol).innerText,10))) sort_type=\’Asc\’; vari,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>
