鎖定行頭和列頭的表格組件
2024-08-26 00:15:52
供稿：網友
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;}
