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" 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" />
<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>
<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" 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" />
<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>
标签:
锁定行头和列头的表格组件
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“锁定行头和列头的表格组件”评论...
更新日志
2024年07月01日
2024年07月01日
- 《陈百强28CD合集》1979-1993 低速原抓[CUE+WAV][8.3G]
- 【蓝调摇滚】JohnHaydock-2024-StraightLineOnACurvedRoad(FLAC)
- 感受独特魅力《百万双钢琴演奏曲》5CD[WAV+CUE]
- 【古典音乐】安娜·莫福《咏叹调》美国版SACD[WAV+CUE]
- 《法拉利·汽车专用试音碟》名贵音响顶级黑胶金碟[CUE+WAV][478M]
- 群星《惠威试音碟5CD》顶级音质[CUE+APE][1.7G]
- 《101系列:百分百3CD 100首百分百经典金曲》[WAV+CUE][2.9GB]
- 群星.2004-《第八届广州国际高级音响展》HIFI珍藏版[APE+CUE]
- 红音堂《蔡琴往事系列》SQCD紫银合金5CD[wav]
- 张小英1978-可爱的人[新加坡黑胶版][WAV+CUE]
- 张小英1978-心有千千结[新加坡黑胶版][WAV+CUE]
- 谭晶《祖国万岁·作品全集》(8CD)[WAV+CUE]
- 群星.2010-《第13届汕头音响展纪念CD》非卖品[FLAC+CUE]
- 群星.2010-《第13届汕头音响展纪念CD》非卖品[FLAC+CUE]
- 吉尔·沙汉姆-《梁祝柴科夫斯基小提琴协奏曲(GilShaham)》[WAV分轨]