标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
+ r6 S7 l4 U0 {$ c3 G9 d/ T2 `3 k
c pageencoding="gb2312"
+ Z9 x" [- t6 C0 H2 x; P
%>
) L3 D0 c$ i! U% w
<style>
% l0 }# ^$ c9 s; o3 Q
.f9{ font-size:9pt; }
; G' F( I+ ]! j# K
.bgc{ background-color:#aecaf9; color: #0033ff }
% Q, G! D& S" t5 \7 @9 `
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
' }' K4 b& K) g5 J. h1 j9 G
border-bottom: solid 1px #4e7dc1;
0 _1 v4 m& E/ k" ~8 N/ V, H9 @, c4 S
border-left: solid 1px #aecaf9;
( }' @7 E, U7 y' q8 @- j
border-right: solid 1px #5679bd;
. {$ B( `; a: b+ ^6 E+ O# C7 V `
padding:1px;
4 M, C6 b+ W' G( o7 r7 m) P8 W
margin:0px;}
4 y/ q, t: v0 `2 K0 l+ c! c+ G+ N
</style>
2 A' p6 d. {+ N: e
<script language="javascript">
, N- A$ h6 F% W0 l0 r
<!--
# o- g3 [5 R# T9 b. q& d
function rv()
$ u7 D* M( R. H9 T5 s( a
{
2 |" w, ]8 p) m- u. x
var val="";
( p( O3 m$ A( U( a) l
for(i=0;i<combo_box.list2.length;i++){
c2 W% u" M# j5 F
val+=","+combo_box.list2
.value;
" w# @; |' {* ?% x* f) Z2 \8 X
}
, N* S" ~9 O( O7 u' N+ [
if(val.charat(0)==","){
2 b. N, w) O2 U+ Z3 y! K3 |) ^/ A
val=val.substr(1,val.length);
, _8 ?2 s& |/ C v
}
# D, G1 Y' @- s* c7 c2 N
opener.form1.frecname.value=val;
7 P: L1 K% F4 a' z1 Z
self.close();
* {; H( r$ R1 p: m" u
}
& s1 _0 U7 x% u3 f# f$ r
//-->
3 r+ f3 d/ c1 p+ U+ G
</script>
3 w/ k! T4 c0 V' G' ^/ P6 |
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 b* y3 [* ]; g; o
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
# l- F6 Q/ e( `- K+ _ h5 b6 a4 f& C1 e
<%
" Q5 v! P& d* k
cdatasource ds=new cdatasource(); //数据联结bean实例
9 E! { v- Y# R- n: t6 ]
java.sql.connection conn=ds.getconnection();
, H! V% s* T; M/ y0 b1 r/ R
java.sql.statement stmt=null;
+ X% ^( @1 w5 y: ?
java.sql.resultset rs=null;
; j" r& |, P1 b! e: F: P
cdatacheck dc=new cdatacheck();
$ `, J2 R; Z2 }% i$ b/ N
%>
1 v! _+ M( k/ o
<%
& V; j* u. [. g4 J* c
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";
# p6 p% G9 t# O+ J1 J, o7 J
stmt=conn.createstatement();
# B7 H) W- ]! A2 Y
rs=stmt.executequery(sqlu);
. h+ h. J* d# ^" ^8 z% [3 q
%>
% A) a0 k8 H" f& n7 Q+ _
<script language='javascript'>
% i# }' ]0 H' \6 _# y. n* t
arr = new array();
4 {7 E' H! Z# |8 \5 m
<% int temp=0;
0 L* |% F m' F* `
while(rs.next())
# @- l/ v1 F' b0 y$ ]5 R, c2 S
{
% ?6 ~- e7 `" E% T" Z7 O
%>
0 N2 B( O. f; ~# G: A: A$ ?
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
8 B2 }; J8 A O7 `7 W- l3 }
<%
2 T. x! [1 A$ H* n/ _! K
temp = temp + 1;
& R8 P [& R' L) m/ R" O7 }8 w0 U: ^
}
+ u" o7 |! S) o, n' g
%>
5 @8 w. }( V% i" E& ?* O
temp=<%=temp%>;
5 h8 P% Y7 a( ^( A! Z5 K: N
function changelocation(id){
7 K. x! r0 P8 d: a
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
4 A" ~0 Q2 I' h1 D
var i = 0;
4 `; i* _+ a2 H1 A
document.combo_box.city.options[0]=new option('-------','');
# c" m Y, ~7 d4 f- @
for(i=0;i<temp;i++){
0 E3 c0 d; S/ g/ R) F1 m
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
' S6 u% d% H; S" z% S, H( b9 |
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
7 M2 `0 b5 N" a" w8 |% Z& E
}
8 p) O. r( l' D3 Y( W* t; n4 H7 F5 A
}
, n# v: y5 z5 g( n& O
}
) C- F/ W0 |# o* }1 e- _6 ^* `
</script>
8 C4 R$ K: {6 g& R7 P9 X
5 c( i& A7 M1 V; a
<form name="combo_box">
7 u9 |3 k! F6 y" [: u( w5 P9 [; l4 f
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
; ]8 }+ R2 V: h+ A4 p( J
<tr height="24">
( \; a" U. \- ?& l' U" s. o
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
8 |7 R9 y1 i4 i2 Q9 R. I7 S. E. W
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
! i1 x/ G6 b0 t0 y8 X7 ]5 a
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
. w3 S8 Y- T0 w0 i
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
! U2 n2 t. _% ], p6 I4 ?9 |
</tr>
5 A3 U; l9 z( L/ V% Q$ f. [7 R+ S4 V
<tr>
2 U: ~" V7 \- ^1 M: P+ N
<td>
4 t, F9 v, u. ?
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
- o1 n2 c3 z3 p& V4 L+ b2 r
<option value="0">请选择部门 ---></option>
1 O1 X% T& B8 E5 g" Q
<%
9 {6 @! n$ f6 c5 P1 [) k4 n
string sqld="select * from tdept";
6 _$ m& w, |$ y
stmt=conn.createstatement();
/ r% l: c W! d3 z* ^; @
rs=stmt.executequery(sqld);
) ?/ n( q3 {* j, Z8 l8 x3 U) d+ @
while(rs.next())
# u, p6 z4 B |! o
{
; I6 q& v8 m+ X7 P3 [
%>
$ Q' v0 x, \( F3 f* C! C/ z! h# R
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
; q; N! n* t0 |& T, k; S$ j- c
<%
6 B- L/ U1 Z; {- a* l
}
' s- o) h# e, Y: [
%>
# ]/ c3 p* y; S
</select>
6 g$ |5 }! ` z: j+ o0 ~7 _
</td>
9 Z3 j/ U5 S8 b
<td>
1 B6 |% Z; S0 \: }4 C! n/ L6 S
<select multiple id=city style="width:150;height:200" class="bgc">
d8 }8 n5 U9 }4 @
</select>
1 b. j" T( F8 W+ H1 |" f& m
</td>
6 J/ E' {3 c3 I- {& ~
<td nowrap align="center" class="bgc">
, z: ?; s& ]7 w. F- ]3 D
<input type="button" value="<<" class="buttons">
) d$ p. ^' t, C/ _0 r# k
<input type="button" value=">>" class="buttons">
; f6 h" w; d1 t# H& F f" K
</td>
U% b9 v& e4 X. L2 Y$ G
<td>
( E( m' G" B0 m0 R9 f) q, i$ S
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
& @4 l2 O2 n9 n+ w$ {) U2 g* J. {% ?* ~
</select>
/ [ W( r; k, Q* E7 [
</td>
: [9 x! G2 e9 F5 E" b& m
</tr>
( h$ d/ e" ~/ F: d5 M1 d- u' M) N
<tr class="bgc">
( }% w: }" D- m# X$ z7 i$ N
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
3 p6 V7 k" W% K; b% t" e
</tr>
, k7 c ~1 ^% Y. E0 F
</table>
O/ Z$ E, ?9 u, ]$ o `, D
</form>
, o/ s( h) e1 ^0 k
<script language="javascript">
0 {# ?- j9 {" j L, L, J6 h
//人名移动
% W6 w8 h' t! ?" u- g0 j6 d
function move(fbox, tbox) {
+ @% V. S+ ^# K
var arrfbox = new array();
# V7 n, f/ A+ _& v/ d
var arrtbox = new array();
# z- C. V1 ]8 P5 I2 j3 Z5 h
var arrlookup = new array();
5 \8 \. _: z1 ]$ a( k- |* t" G6 k
var i;
$ T% y* {( L% j, b4 S r
for (i = 0; i < tbox.options.length; i++) {
* z( O0 c: F, G; Z
arrlookup[tbox.options
.text] = tbox.options
.value;
3 g0 n- l, N! E% [+ Y
arrtbox
= tbox.options
.text;
1 \2 `& f! Y3 i1 I0 D
}
3 Y7 p0 K1 d c9 W1 Q
var flength = 0;
2 R8 b) {* v7 y
var tlength = arrtbox.length;
# Q4 |& D' `! a
for(i = 0; i < fbox.options.length; i++) {
+ R! X2 m- q& d- N
arrlookup[fbox.options
.text] = fbox.options
.value;
7 t" k% V% \! Y
if (fbox.options
.selected && fbox.options
.value != "") {
) n8 K3 O) _ n3 T
arrtbox[tlength] = fbox.options
.text;
: J, P! X0 e9 f0 q2 J& ] j
tlength++;
! u v/ j' Z" j
}
1 { P6 _5 K' H8 E7 P9 P
else {
* D2 f0 j+ b/ o- W
arrfbox[flength] = fbox.options
.text;
7 n7 E9 M; ]# P) p- m: \5 E. b" J
flength++;
2 [ Q8 f7 f3 L, P* C1 E
}
6 p" v3 r, ]3 g3 Z; d8 Y
}
, v+ M' }6 d% F$ U3 b8 `7 U1 J
arrfbox.sort();
) p5 s6 v& x$ [ |3 q7 |
arrtbox.sort();
. @8 D+ g; P: ~+ W* P0 k0 o
/ \0 q2 ^& X! _' o
fbox.length = 0;
0 R) J& T: v+ g6 ]
tbox.length = 0;
, w+ T" O0 C+ [
var c;
- h: o, x; y5 h/ Q5 E1 F
for(c = 0; c < arrfbox.length; c++) {
5 u3 d4 F* R# v$ S% l7 p
var no = new option();
7 Z- {+ w; a6 v5 X {6 { I) |
no.value = arrlookup[arrfbox[c]];
1 n8 v5 D! O( W" m, f; E
no.text = arrfbox[c];
; b0 W% O+ m5 [0 t
fbox[c] = no;
4 L' M' j O- g! X
}
" _) z1 ~% r, @( }/ ]7 I& l9 g1 L
for(c = 0; c < arrtbox.length; c++) {
# g0 n. t& d0 B' ~( q
var no = new option();
! N8 m5 @# C6 R# U/ A- H
no.value = arrlookup[arrtbox[c]];
0 M. G3 ^. j& |- v/ T1 J
no.text = arrtbox[c];
) F: w% A& ^3 d/ S2 G- V8 F
tbox[c] = no;
: i( Q) ]7 h( M [- K
}
, F0 p. h4 f' R4 \2 h3 K" @
}
8 K# k6 t0 z/ E$ d' W4 Y
</script>
. e8 b8 G+ h# X
</body>
7 g9 L# ^) p+ [
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
