上海365论坛 » IT新干线 » [网页特效]锁定行头和列头的表格组件


收藏	小游戏	365在线影院	365社区BT站	BLOG	首页

打印

[网页特效]锁定行头和列头的表格组件

龙少

超级版主

Rank: 8 Rank: 8 Rank: 8 Rank: 8 Rank: 8 Rank: 8 Rank: 8 Rank: 8

闲云野龙

爱心天使

楼主大中小发表于 2005-11-8 11:18 AM 只看该作者

[网页特效]锁定行头和列头的表格组件

1、在页面中引入风格单定义上海365论坛  Q! Q9 }5 S# l+ g; l+ l
- 我爱上海每一天6 {) r7 Q3 r& l0 C3 q# k2 @
.LockHeadTable {behavior:url(LockHeadTable.htc)}
上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs* v$ _# ]( T6 A5 S' A
www.ala365.com2 h- S& J; w- Y9 H) R. x
www.ala365.com, Q$ a$ A" G+ t$ m9 ]: N# r
2、在需要锁定行列头的表格定义中添加语句“class=LockHeadTable”就OK了，其他参数有
ROWHEADNUM=锁定行数上海365论坛－ bbs.ala365.com6 g0 r, \. s  |8 |
COLHEADNUM=锁定列数
ROWHEADSTYLE=行表头风格
COLHEADSTYLE=列表头风格7 }  E, T0 ], k8 d$ S# H' u* e
ROWSTYLE=行风格1|行风格2|……|行风格n
FOCUSSTYLE=获得鼠标焦点时的风格上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs0 w! C  N2 H. x
上海365论坛, z# \) _# A) b: ?3 [
3、点击行标题时可以对数据进行排序上海365论坛－ bbs.ala365.com- n* c6 u0 ?( f; n. \2 N; R+ y

注意： - 我爱上海每一天" I& q2 u; b- m, @6 H! z2 y" p6 w
　　使用本组件时，行表头中的单元格不允许跨行+ \! S$ t( D8 N4 u  m* I/ _+ z
上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs, g: z! ?- i3 v% L" G
例：www.ala365.com/ Z0 t" ~  V1 z* _& Q( v+ R+ ~7 o
" |  Q% G+ S6 M' B5 _
www.ala365.com* L8 s" w. S, c: L8 o1 l+ R6 |9 f
源代码：www.ala365.com7 d: N& ?" b6 x+ ^9 d/ s

LockHeadTable.htc(组件程序)上海365论坛0 U' n/ j. M' [9 y" p
www.ala365.com( n' l* W# `' S: O- h& Z# w0 Y

- 我爱上海每一天1 O( p+ L7 m: x' \
www.ala365.com) }/ A4 c/ C1 T# J' W7 n
上海365论坛－ bbs.ala365.com9 d. G1 o& b! A2 ~0 a4 n
上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs' b( z- \3 j/ ]' }0 f9 m
//初始化
ROWHEADNUM = (ROWHEADNUM==null?0:parseInt(ROWHEADNUM, 10)); - 我爱上海每一天# g5 O; `+ U1 A( q7 N/ A
COLHEADNUM = (COLHEADNUM==null?0:parseInt(COLHEADNUM, 10));上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs' u! \. C( `* j2 s! `
ROWHEADSTYLE = (ROWHEADSTYLE==null?:ROWHEADSTYLE);
COLHEADSTYLE = (COLHEADSTYLE==null?:COLHEADSTYLE);
上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs8 Q1 p# F& i& g8 p0 f, y4 s0 m
arrRowStyle = (ROWSTYLE==null?new Array():ROWSTYLE.split(|)); 上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs9 a/ O- m4 [, }. K% t7 N) V
上海365论坛－ bbs.ala365.com( P% r: t* o" i4 l6 \% [( B# P- ]
//设置行表头
var i, j, rowItem, cellItem;
rowHead = element.cloneNode(true); - 我爱上海每一天- K5 V# G' `  t  j! ^+ b# E
for (i=0; i=ROWHEADNUM) {
rowItem.style.cssText = position:relative; + arrRowStyle[(i - ROWHEADNUM) % arrRowStyle.length];www.ala365.com5 D4 _! P3 f3 }8 \- V9 m' O9 v
if (FOCUSSTYLE!=null) { - 我爱上海每一天9 N$ a* T1 {1 Y3 d  \3 M1 h% N# F
rowItem.onmouseover = function () { this.style.cssText = position:relative; + FOCUSSTYLE;}
rowItem.onmouseout = function () { this.style.cssText = position:relative; + arrRowStyle[(this.rowIndex - ROWHEADNUM) % arrRowStyle.length];} - 我爱上海每一天: c0 J  V* ^8 B! T7 S
}+ N. T8 U" F* ?; S9 a/ j, Z5 f
  }

  for (j=0; j上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs) |8 L! R6 O9 H+ \6 @8 x
上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs: I. t; Z- M7 b- x( ~
//排序
function sortTable() {$ A$ p% o- F! p
  var objCol = event.srcElement;上海365论坛- v# R4 j; X' p% A  a$ q
  if (objCol.tagName == TD) {
var intCol = objCol.cellIndex; - 我爱上海每一天  W4 e, G$ V; L& h# I1 X
objCol.sortAsc = !objCol.sortAsc;3 J" {6 C4 t4 _

sort_type = 'Num';
if (isNaN(parseInt(element.rows(ROWHEADNUM).cells(intCol).innerText, 10)))上海365论坛( e" l: ^. O! y3 s! a2 o
sort_type = 'Asc';上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs6 ^+ L0 B% M8 W; D! p

var i,j,boltmp; - 我爱上海每一天. T1 X$ {2 g5 l/ o, M. `, p
for (i = ROWHEADNUM; i = parseInt(element.rows(j).cells(intCol).innerText, 10));
   break;
   case 'Asc':
   default: - 我爱上海每一天" @" r' S/ l8 x: p
   boltmp = (element.rows(i).cells(intCol).innerText >= element.rows(j).cells(intCol).innerText); - 我爱上海每一天& O8 d9 i3 \' H& a
   }上海365论坛－ bbs.ala365.com3 s& W! ^4 G" J) v8 i( C1 l& \# j
   if ((objCol.sortAsc && !boltmp) || (!objCol.sortAsc && boltmp)) {
   element.moveRow(j, i);上海论坛,上海人论坛,上海时尚,上海美食,上海地图,shanghai bbs) ?" m1 I! c' B0 F3 [. i) y
   }
}
  }
}! j+ U0 I  `, A; |9 m- W3 }  P/ J
www.ala365.com# c$ ~  |, O5 P# P" K* s8 Y
www.ala365.com2 m0 c( ^) I+ l
- 我爱上海每一天2 X/ c9 L8 d6 |2 M) ^1 F+ p

转自：  中国站长网页特效