1、在页面中引入风格单定义
1<style>
2.LockHeadTable {behavior:url(LockHeadTable.htc)}
3</style>
2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable"”就OK了，其他参数有
ROWHEADNUM="锁定行数"
COLHEADNUM="锁定列数"
ROWHEADSTYLE="行表头风格"
COLHEADSTYLE="列表头风格"
ROWSTYLE="行风格1|行风格2|……|行风格n"
FOCUSSTYLE="获得鼠标焦点时的风格"
3、点击行标题时可以对数据进行排序
注意：
使用本组件时，行表头中的单元格不允许跨行
例：
1<table align="center" border="1" cellpadding="3" cellspacing="0" class="LockHeadTable" colheadnum="1" colheadstyle="background:#F7F7F7; color:black;" focusstyle="background:green; color:white;" rowheadnum="3" rowheadstyle="background:#F7F7F7; color:black;" rowstyle="background:#FFFFFF; color:black;|background:#F7F7F7; color:black;" width="1500">
2
3源代码：
4
5LockHeadTable.htc(组件程序)
6
7
8
9
10<public:component>
11<public:property name="ROWHEADNUM"></public:property>
12<public:property name="COLHEADNUM"></public:property>
13<public:property name="ROWHEADSTYLE"></public:property>
14<public:property name="COLHEADSTYLE"></public:property>
15<public:property name="ROWSTYLE"></public:property>
16<public:property name="FOCUSSTYLE"></public:property>
17<script>
18//初始化
19ROWHEADNUM = (ROWHEADNUM==null?0:parseInt(ROWHEADNUM, 10));
20COLHEADNUM = (COLHEADNUM==null?0:parseInt(COLHEADNUM, 10));
21ROWHEADSTYLE = (ROWHEADSTYLE==null?"":ROWHEADSTYLE);
22COLHEADSTYLE = (COLHEADSTYLE==null?"":COLHEADSTYLE);
23
24arrRowStyle = (ROWSTYLE==null?new Array(""):ROWSTYLE.split("|"));
25
26//设置行表头
27var i, j, rowItem, cellItem;
28rowHead = element.cloneNode(true);
29for (i=0; i<ROWHEADNUM; i++) {
30rowItem = element.rows(i);
31rowItem.style.cssText = 'z-index:10; position:relative; top:expression(this.offsetParent.scrollTop);' + ROWHEADSTYLE;
32}
33
34//设置列表头
35for (i=0; i<element.rows.length; i++) {
36rowItem = element.rows(i);
37if (i>=ROWHEADNUM) {
38rowItem.style.cssText = "position:relative;" + arrRowStyle[(i - ROWHEADNUM) % arrRowStyle.length];
39if (FOCUSSTYLE!=null) {
40rowItem.onmouseover = function () { this.style.cssText = "position:relative;" + FOCUSSTYLE;}
41rowItem.onmouseout = function () { this.style.cssText = "position:relative;" + arrRowStyle[(this.rowIndex - ROWHEADNUM) % arrRowStyle.length];}
42}
43}
44
45for (j=0; j<COLHEADNUM; j+=cellItem.colSpan) {
46cellItem = rowItem.cells(j);
47cellItem.style.cssText = 'position:relative; left:expression(this.parentElement.offsetParent.scrollLeft);'
48\+ (i<ROWHEADNUM?'':COLHEADSTYLE);
49}
50}
51
52//设置行标题排序
53for (i=0; i<ROWHEADNUM; i++) {
54rowItem = element.rows(i);
55for (j=0; j<rowItem.cells.length; j++) {
56cellItem = rowItem.cells(j);
57if (cellItem.rowSpan==ROWHEADNUM-i) {
58cellItem.style.cursor = "hand";
59cellItem.sortAsc = true;
60cellItem.onclick = sortTable;
61}
62}
63}
64
65//排序
66function sortTable() {
67var objCol = event.srcElement;
68if (objCol.tagName == "TD") {
69var intCol = objCol.cellIndex;
70objCol.sortAsc = !objCol.sortAsc;
71
72sort_type = 'Num';
73if (isNaN(parseInt(element.rows(ROWHEADNUM).cells(intCol).innerText, 10)))
74sort_type = 'Asc';
75
76var i,j,boltmp;
77for (i = ROWHEADNUM; i < element.rows.length; i++)
78for (j = i + 1; j < element.rows.length; j++) {
79switch (sort_type) {
80case 'Num':
81boltmp = (parseInt(element.rows(i).cells(intCol).innerText, 10) >= parseInt(element.rows(j).cells(intCol).innerText, 10));
82break;
83case 'Asc':
84default:
85boltmp = (element.rows(i).cells(intCol).innerText >= element.rows(j).cells(intCol).innerText);
86}
87if ((objCol.sortAsc && !boltmp) || (!objCol.sortAsc && boltmp)) {
88element.moveRow(j, i);
89}
90}
91}
92}
93</script>
94</public:component></table>