标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
% W# Z, S8 {9 `5 Y* g1 a
c pageencoding="gb2312"
?& u D' @% `
%>
; s# j/ x, ?7 W A' V' |2 I& \$ o
<style>
6 S0 x1 G. h3 I" \3 @
.f9{ font-size:9pt; }
$ h& x4 h* q7 m$ }8 E1 _
.bgc{ background-color:#aecaf9; color: #0033ff }
" L3 z7 a( X) v. F5 v r
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
. F) b; ?. N) T1 Y# b2 ]9 |' h
border-bottom: solid 1px #4e7dc1;
t; ]9 ?( d$ Q% g$ c# D: |. @
border-left: solid 1px #aecaf9;
' s2 Y& g. ^; o4 I
border-right: solid 1px #5679bd;
( W2 F/ h# T) M2 V% O3 ]3 k
padding:1px;
# b2 R3 `, \3 x8 q& }* j
margin:0px;}
# u. ^5 V1 O2 d8 i& n3 Y& h- n1 Q
</style>
# D% v, i: Y5 ?( h
<script language="javascript">
' V! r! [2 d8 T/ D2 a' O' k
<!--
, ]! m6 g+ D; d8 o
function rv()
' O8 y3 J2 F" V0 v- F& `1 `
{
/ }" j3 q: c+ x9 ^* N- _
var val="";
) n. ~6 o" T! L& H, I8 c4 |3 }
for(i=0;i<combo_box.list2.length;i++){
' i( T' K: }% ?+ v8 X( u) y1 ?- Q
val+=","+combo_box.list2
.value;
% S5 {+ H s( u' i- b
}
& b2 `9 P, E7 t7 J
if(val.charat(0)==","){
+ S4 f& m3 @1 U7 Z1 B( K4 U
val=val.substr(1,val.length);
- F* v$ b% G9 R; }6 ~
}
. J6 V1 L, N! P9 e8 m" V" g5 M, c: E
opener.form1.frecname.value=val;
$ I# l4 {. ^$ v
self.close();
( m" h6 e5 y- T& S! Z- B) h
}
# R+ M4 [% {& U0 _! {
//-->
S8 u/ G& f8 E" c0 ], S4 f
</script>
1 f e, ]1 p, M: k8 Z* i. h
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
- k4 Y, n$ S, s: J5 Y
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
" Y6 Y/ d) u( N4 O4 g! p! h* y
<%
Z" p) A2 K7 B, H! W
cdatasource ds=new cdatasource(); //数据联结bean实例
v3 h% D5 i* _" v* g
java.sql.connection conn=ds.getconnection();
& h1 ]# G Q, _3 |! Y0 v4 i# E
java.sql.statement stmt=null;
2 x- c9 a, I5 U: S/ F
java.sql.resultset rs=null;
2 g( @# l1 z5 x8 T1 k
cdatacheck dc=new cdatacheck();
$ h0 o8 a0 J" K& v4 A( e" M* G
%>
. A2 e* G8 a9 v' \$ ]$ Y
<%
2 v3 D4 e( o2 U* I& L
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 ^3 h8 A3 w9 `: r
stmt=conn.createstatement();
" ^; b9 t8 J+ L1 L8 S
rs=stmt.executequery(sqlu);
3 o7 Q* u5 R; C5 {5 N
%>
) @ { g7 _+ t# }& Q4 s! b' i: u: [
<script language='javascript'>
^- N5 M% a9 H% P9 U% N2 z i
arr = new array();
/ G* C+ @' e0 h9 W( o0 k
<% int temp=0;
6 K" b1 e- k0 E
while(rs.next())
4 y: G) y7 e% c1 h" b% M
{
* r3 d5 q9 C) T8 } t
%>
]1 |0 W; f% o1 X& Y B
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
: \! B0 R8 x2 l+ O8 Z
<%
4 E$ L7 z% M2 T6 A% ^( V& m4 d
temp = temp + 1;
8 P& \, U A- x5 C
}
) M! O% @0 p( Q& P3 d
%>
9 M4 `0 i# r: s6 x4 c l
temp=<%=temp%>;
& u) ?. e' s g# `, u( {$ Y
function changelocation(id){
0 o) @8 n! x1 \
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
- x3 l8 d8 c* _' H& E& S2 R
var i = 0;
' ?0 L+ k# m3 E5 G ^& }
document.combo_box.city.options[0]=new option('-------','');
8 R% W3 b L3 t8 `: k
for(i=0;i<temp;i++){
. i+ }0 V# z4 ?; V# I- ]4 Q" q
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
; H) y9 {1 I/ ~( M' k5 m
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
& x9 g' @9 Y5 i& l1 B: v
}
8 k& a6 N d& I) t9 b9 r, I; q
}
$ G: t1 n1 p9 j3 j) a. p% `; k
}
) Z7 i% z% J% p( c, @) Z
</script>
# _, c, @2 o3 y+ \
6 H+ \2 ^! O! [& a. I8 f% x g/ f
<form name="combo_box">
6 I1 p+ O3 Z& a8 N: o- e9 }
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
6 r. `" L& d9 B2 Y) p0 O
<tr height="24">
, J4 p+ f1 z3 @8 @; q& @
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
: Q) y. p3 d+ C. \) u, |' _' V9 }7 x# X
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
8 T/ T$ r" o" ]" k4 Y6 m0 {, q& A
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
# _ H/ g3 v2 b9 k- }
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
6 |3 C' `0 N( `+ X7 a/ _
</tr>
& M8 J; k6 t/ v2 Y% s6 Q n
<tr>
H: ~0 u* `' y/ i' @1 Q3 g
<td>
+ Y9 w% K% a$ ^3 i$ N i
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" {: t1 @! l% D! K7 D3 X+ _+ b1 p- s
<option value="0">请选择部门 ---></option>
$ ^$ l6 N \5 d4 e. |) I4 u
<%
& T, T) J A: Y5 T# }1 H
string sqld="select * from tdept";
- U3 ~1 X" p) Y' J; h. E7 q( r B( k
stmt=conn.createstatement();
; p2 b4 p3 Y5 z- H" Z7 u0 H2 c8 A+ l8 G
rs=stmt.executequery(sqld);
$ V5 f6 |8 E2 u# M. B9 s7 R
while(rs.next())
: X8 b; r: C' r P
{
- b" p* x/ Z9 L3 }, T" ^: M
%>
; H' W5 d8 `8 h* l! l9 ~
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
; u1 h) z: }% x/ `* x$ z5 [
<%
, Z4 y! I( @ m# G
}
! h' l* e# k& ~" Y
%>
3 |! x( f/ {3 q8 r" [. m6 l
</select>
, r! F2 i M' P
</td>
& ?8 {) g1 z T: Y2 V( |' k( ?/ r
<td>
+ G2 L$ n2 y% `) w5 f- x
<select multiple id=city style="width:150;height:200" class="bgc">
/ L" M+ o ]( Q6 U! l: U
</select>
7 W' C0 W2 s7 w: e' O& {
</td>
. p6 {$ O: T- S1 K0 T6 t0 v/ B; M
<td nowrap align="center" class="bgc">
6 @9 J; c/ P5 P; j7 M) O
<input type="button" value="<<" class="buttons">
( b$ I# t3 s! v2 U5 |; p$ r/ S- |
<input type="button" value=">>" class="buttons">
# U, m# z) m4 T8 |
</td>
3 h$ y, p2 z3 p: f! o) u4 j* V
<td>
! P. x9 @& D- D1 |! o' k. P
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
/ w( |- h2 z6 \$ _4 j& Q/ B8 ]1 R4 J
</select>
! ~' c- q# u8 q2 d
</td>
! `. j2 |! _; q2 s- I
</tr>
# g! U* p; a* N3 B( ~# }; q. }
<tr class="bgc">
3 q4 y* X$ w% Y7 `: W6 C* E- }/ Q" m
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
8 Z. ~# F9 }( U. m7 ]9 E
</tr>
- k; _9 t' H: Z( _7 q& H" h$ S
</table>
+ E& i: h% J5 z+ W, i- u
</form>
; _* s9 R/ z! M. ?8 q" p) x
<script language="javascript">
+ X7 L" }2 B1 {# M
//人名移动
! s4 s6 X0 I& F: `8 [
function move(fbox, tbox) {
7 {3 @' v; Z# Z& T5 v+ q. S! c
var arrfbox = new array();
4 q9 y. s. K9 }. s2 c
var arrtbox = new array();
/ ~# ]4 L' [# d4 G
var arrlookup = new array();
5 g% [6 } _" Y: }/ O$ a( y( F
var i;
; T" Z4 B' M0 e. q- N+ X) A) K
for (i = 0; i < tbox.options.length; i++) {
/ `6 M# ?" S; n1 f1 h# Y
arrlookup[tbox.options
.text] = tbox.options
.value;
, \" H, v* H0 P- W+ A) I
arrtbox
= tbox.options
.text;
5 B! F. g# U2 d5 E ~: P$ w
}
0 u' I* C; Z- O* z" H
var flength = 0;
( M, j* z5 d6 T& c; V( D( G z4 \
var tlength = arrtbox.length;
4 o- y% J. [/ F/ `1 M
for(i = 0; i < fbox.options.length; i++) {
/ i& c6 m3 y' J9 w% C
arrlookup[fbox.options
.text] = fbox.options
.value;
' ^8 q1 y- S- f& f7 C! K
if (fbox.options
.selected && fbox.options
.value != "") {
- ?9 r. F0 R0 l; W$ J6 F
arrtbox[tlength] = fbox.options
.text;
4 N8 W1 c- t4 K- y- @- T
tlength++;
0 f% T" S# H }4 \8 Y) m
}
+ i3 j' q L; {( }
else {
3 Q, U- }. t! {8 N, G$ f2 q
arrfbox[flength] = fbox.options
.text;
w; H; e4 d; D, r- U( v' y
flength++;
; M& J; X- `+ ]$ N! R# d
}
* R/ m2 H5 F$ @
}
: e- O5 f1 [" E) \' o
arrfbox.sort();
' e* n$ g3 r! X5 p4 ?
arrtbox.sort();
4 r- h, m9 N" }6 W- K3 D
+ x) h. ?7 V* H& M6 w& Y2 x
fbox.length = 0;
/ B- ]7 w! q, K; d! L3 R5 X# Q; S
tbox.length = 0;
. E, c3 {- K0 e" @7 o
var c;
% H/ w' l7 L p/ J1 m% r- Q8 W9 m
for(c = 0; c < arrfbox.length; c++) {
4 I/ z/ Q% Z2 `9 a
var no = new option();
4 K! m; r' _7 I# ^! a) R
no.value = arrlookup[arrfbox[c]];
0 p; V3 K5 `6 r* ~3 \& t" @8 t
no.text = arrfbox[c];
+ ?7 o1 k! D/ ~# y
fbox[c] = no;
6 C1 c3 J, d" I- ?+ J. w
}
8 D6 m/ g3 |5 n* T9 q
for(c = 0; c < arrtbox.length; c++) {
( l7 v. c) W h( j( N# H, I
var no = new option();
/ x$ N' ?! i* e& E! \
no.value = arrlookup[arrtbox[c]];
/ F: J5 e( f. M4 m! a- Q
no.text = arrtbox[c];
, O; a8 _- j8 a5 ^0 u
tbox[c] = no;
) A" ?! W9 }6 s |# Z8 q! X6 a5 Y
}
B, i0 l( L1 D" o
}
5 n4 H5 b; ~ ^+ U1 {6 U: a& A
</script>
" l- q9 O( m3 i$ \
</body>
; _5 _$ x1 j1 x7 ~: X; N
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
