| 标题 | 锁定行头和列头的表格组件 |
| 范文 | 1、在页面中引入风格单定义 <style> .LockHeadTable {behavior:url(/oblog312/LockHeadTable.htc)} </style> 2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable"”就OK了，其他参数有 ROWHEADNUM="锁定行数" COLHEADNUM="锁定列数" ROWHEADSTYLE="行表头风格" COLHEADSTYLE="列表头风格" ROWSTYLE="行风格1|行风格2|……|行风格n" FOCUSSTYLE="获得鼠标焦点时的风格" 3、点击行标题时可以对数据进行排序 注意： 使用本组件时，行表头中的单元格不允许跨行 例： <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("|")); //设置行表头 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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。