| 标题 | 锁定行头和列头的表格组件 |
| 内容 | 1、在页面中引入风格单定义 <style> .lockheadtable {behavior:url(/oblog312/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> 源代码： 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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。