标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
- ~+ G- p$ O2 R6 i9 `% g( b6 h
c pageencoding="gb2312"
0 ?# Z8 v: P$ |/ k9 L
%>
2 j3 Z3 t: z% J% D+ \- G8 Z: K
<style>
* g- e* r+ m1 ?& H# X
.f9{ font-size:9pt; }
) R2 q, F; E- I2 A& _4 X1 m
.bgc{ background-color:#aecaf9; color: #0033ff }
$ K3 s N: T) c
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
, T6 h5 @; C6 _2 m1 r
border-bottom: solid 1px #4e7dc1;
; D* y6 {$ a2 B" _9 Q0 r4 E6 ]. u' J
border-left: solid 1px #aecaf9;
F) M+ B( Z& R: D7 o) d
border-right: solid 1px #5679bd;
4 n( n/ D* t2 P, s( Q: N; Z/ Z
padding:1px;
3 W, n+ y) q& Z7 `! f6 b1 N0 C
margin:0px;}
: D }+ V o0 |4 J
</style>
& E; L& g3 i0 q6 }1 x2 Y
<script language="javascript">
8 x# [: h) v# F
<!--
8 d! g* G7 R2 n% x
function rv()
. N+ e9 N) P7 a: R
{
- z" H/ c* n L6 c
var val="";
8 P% Z' `4 G/ ^ o* E; b' @( [
for(i=0;i<combo_box.list2.length;i++){
. F9 M' |: D) Q# V/ e4 F
val+=","+combo_box.list2
.value;
8 o2 J7 a" k$ j
}
Y% i- J* G6 Q3 h2 z
if(val.charat(0)==","){
$ ?0 d, ?* X4 b- w2 N- R
val=val.substr(1,val.length);
, T" _3 o2 S. H" U
}
: i5 p: I8 |5 }( j- @, _
opener.form1.frecname.value=val;
9 q2 o* c7 o0 o3 B! m* `- s
self.close();
7 Z$ g2 Z* f/ B1 ^$ c4 h0 o( h
}
6 w- L9 r; d3 F2 ~
//-->
8 B5 r7 N1 D9 W9 g
</script>
1 o# a4 x7 Q9 \7 k% G
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
% `( }' C Z" ^4 d* f
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
5 D+ c2 r1 F4 _& q' T1 [6 j. b0 d6 C
<%
& F( }2 v" d# |. @
cdatasource ds=new cdatasource(); //数据联结bean实例
/ M$ p+ {- @/ H& ]/ D* P$ T7 Q3 ^
java.sql.connection conn=ds.getconnection();
: c( W. [5 o+ H7 g& n( \
java.sql.statement stmt=null;
1 _& _' \4 q. L% r
java.sql.resultset rs=null;
" I" U; E* t D# k) `2 c* B" \
cdatacheck dc=new cdatacheck();
r! U6 L$ s- c6 \* j1 o
%>
( U0 `% ^- M" X* i1 m8 @
<%
% f" `8 |3 @2 b" I$ R {: b. Y
string sqlu="select t1.fno, t1.fname, t2.fname as fdept from tuser t1 left outer join tdept t2 on t1.fdept = t2.fno order by t2.fname";
1 D( d& h! |; y$ \* `) J; J ]
stmt=conn.createstatement();
7 V6 e0 }) J4 g1 N$ w) K+ a! d
rs=stmt.executequery(sqlu);
: W% z! [/ A: U: o ?# f2 F
%>
8 d' O% }0 U4 @9 ?& Y9 _5 Z1 Q
<script language='javascript'>
+ }" b. |- g8 Q" h7 d& g
arr = new array();
8 v% q# h- H8 e- S/ b
<% int temp=0;
/ K1 m. ~ ?9 p* y
while(rs.next())
+ V" b9 z+ }; F
{
3 N: D8 s, d& D( o! Z
%>
* `5 s k# K1 ^+ \2 [. w1 A
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
+ p# g3 P7 a# m
<%
% i3 L% W7 [& L7 Q$ }$ R* D
temp = temp + 1;
$ b2 b/ U+ J8 g' ^/ r- m3 x
}
; L$ g* y2 D+ b! N2 b/ G0 j
%>
1 ]( E9 l: ^: O7 g3 K9 L
temp=<%=temp%>;
' {3 ~7 L2 T8 U
function changelocation(id){
8 \: b, u+ e* n
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
! @- [( G B: }" y/ {
var i = 0;
: J% d: b l8 w3 r: N: G
document.combo_box.city.options[0]=new option('-------','');
& O) ^% ?# P1 ~
for(i=0;i<temp;i++){
" y y' E2 l- G" W4 {
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
0 a) l) f9 E) [7 J1 O
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
B( z: y7 l, R8 a: Q! S4 G
}
5 D& V5 Q5 u& | L/ G. j
}
! `: ?% j/ E5 u6 b, @+ R2 k$ F# r
}
* ^- V6 e3 i( S5 L) G3 T
</script>
9 b' a9 I; I7 S( T
" B* w* P' B! y0 h2 u
<form name="combo_box">
" L# J" a D9 }% F% A
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
; [" i4 `" g7 B, J+ T
<tr height="24">
) [" b- B; v# Q5 K5 B0 W. x( t6 J
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
( F# z( y/ k! P/ W8 i- K5 w/ w
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
0 E* h; U8 O" o% A1 }+ L( e7 K
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
6 M, E* J) Z3 P4 t6 q7 `: o
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
( S5 w1 O0 u! d$ z1 p0 j7 Q j
</tr>
8 A s6 M6 d1 t4 X5 Z
<tr>
' @8 q1 U. H7 `4 l3 |7 w# C# t; w
<td>
4 ^0 T( X$ I4 f2 V/ i, H2 a; p9 m' F
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
: c: N' j1 o% W1 ?
<option value="0">请选择部门 ---></option>
9 Z' \/ j5 m6 |* O* a! m8 K" T
<%
) v, e* l6 \* _, k* ~' f6 ^" T
string sqld="select * from tdept";
! J6 G+ F ]$ D4 P8 N1 \/ ^$ e, X
stmt=conn.createstatement();
, Q3 ]) G5 P: L- ]) G* c
rs=stmt.executequery(sqld);
! k5 A7 T. l7 ]# U$ _
while(rs.next())
3 \, \- g! F3 L. K
{
7 G# L7 k; N- K y. ~
%>
1 ~0 O0 Z) O) @: o
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
, d; L! s$ e6 Y( F* }
<%
7 D" d. I3 J7 F# y# Q
}
- B& H3 o) K1 I2 O9 b: H' q6 t
%>
- B7 T3 g9 A0 c; W
</select>
8 K6 V2 S, N2 G, x$ j
</td>
2 ^( {* ~; a$ c
<td>
0 T( F" V% ]! Q
<select multiple id=city style="width:150;height:200" class="bgc">
. D# I, F! N; B( C6 a4 x9 C
</select>
0 W+ D; K& p) b S# k. R
</td>
$ [/ q+ e% r3 ]7 p# t
<td nowrap align="center" class="bgc">
* T/ r; |6 m) V( U, }" N
<input type="button" value="<<" class="buttons">
) O' X/ {: O) R# K7 r# }
<input type="button" value=">>" class="buttons">
$ z5 I0 Q$ n1 M0 Z% t0 n0 @( F
</td>
0 S3 ?9 ], h' Z
<td>
1 M1 s; F2 V# o1 |. }1 h
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
. ]& s" R: G* B3 m( }
</select>
% y) i# v0 Y9 _" P: {
</td>
4 n4 W# u+ o+ v6 E! Q+ F
</tr>
% i6 ]& G0 x- o
<tr class="bgc">
/ a$ a V. d5 q0 f
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
3 y) J' w F5 f( `% ?. s
</tr>
! d! @! b# o' O6 N; H- {4 A) _
</table>
4 \$ H: q$ H! j( x! @
</form>
8 k, M; N; h1 e
<script language="javascript">
2 M. w+ Z8 ~3 A- M
//人名移动
: K) X+ P$ G; R) [% {& d, C9 c
function move(fbox, tbox) {
6 B& y S8 g; G2 r# I1 M. o* o
var arrfbox = new array();
# p$ o9 x* c8 y: @9 ~9 Q5 o
var arrtbox = new array();
* L; m" x5 H& @7 O, H9 M3 a& H9 l
var arrlookup = new array();
: g' d# p# F3 f3 n. {* u2 v
var i;
; L, E L, [ N" @+ [- c2 J
for (i = 0; i < tbox.options.length; i++) {
7 D C: Z* U$ G9 t
arrlookup[tbox.options
.text] = tbox.options
.value;
' H" d5 h; Q/ _
arrtbox
= tbox.options
.text;
6 S5 e6 @* q0 h
}
; p" A6 a; ~" t6 `
var flength = 0;
- g% j V, v! q: y- u/ W3 m! ^
var tlength = arrtbox.length;
# p$ ]6 g8 A- E
for(i = 0; i < fbox.options.length; i++) {
# [* C. n0 L9 B# d, ?# b% [( ~8 E
arrlookup[fbox.options
.text] = fbox.options
.value;
% H g+ q% o P( Y
if (fbox.options
.selected && fbox.options
.value != "") {
5 x3 [0 x' D' h6 e9 g+ t
arrtbox[tlength] = fbox.options
.text;
. e8 K; n# g" ?1 _9 |
tlength++;
/ q2 f0 m7 w2 F5 t+ _$ e
}
' u% r5 r' B, H& F
else {
& [3 N( k6 \1 T
arrfbox[flength] = fbox.options
.text;
; Y& w% Z* l8 a& Q" t
flength++;
, q( m$ N( \9 _* Z. q* ]( e
}
7 V; k @: O( `- l$ a
}
- z4 U1 U1 @6 Q
arrfbox.sort();
% k2 T9 Y( r$ N4 u1 B
arrtbox.sort();
: U' C9 h% A7 g+ \
5 m0 C) ]) W7 _9 A- P% E' b
fbox.length = 0;
7 v, e5 {" O+ l8 b; w; B9 K" f
tbox.length = 0;
! l: B; b. Z) u' v$ }* s3 Q! \
var c;
+ E6 Q6 Q9 c! t- ]0 z; S0 O
for(c = 0; c < arrfbox.length; c++) {
4 L. ~! B' x% o5 x3 P) R
var no = new option();
' t( q' K* `! N9 W# P5 |
no.value = arrlookup[arrfbox[c]];
& t- ~5 P0 K+ o. m) N
no.text = arrfbox[c];
) W0 u' W. @# i' g
fbox[c] = no;
- q) @: G( ?0 W
}
/ c8 O* _1 n. b( ^( [9 g6 y0 [' I
for(c = 0; c < arrtbox.length; c++) {
: I0 i1 d z" ?; P
var no = new option();
. H w. E% l, S! }5 I- f. x# I
no.value = arrlookup[arrtbox[c]];
& e! f$ l4 B! M! Z5 j
no.text = arrtbox[c];
, F: B0 W* p) }; F' H" D% A6 s& \
tbox[c] = no;
) [& K2 I, k, o7 m, C/ {5 C
}
" s3 b" T; d k# E% z
}
7 t; x1 ?% p( ?( i& c, ~6 G% A
</script>
3 G% w7 L2 L8 k% P
</body>
+ {1 j2 \2 z: a8 E! X
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
