标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
4 `4 m6 M) n& f; G3 ]
c pageencoding="gb2312"
/ E0 `# M/ Y% `; P# H
%>
2 _; \$ L; w, d1 Y# r2 e
<style>
# Y; M8 B' ^9 V( I3 z/ M9 F
.f9{ font-size:9pt; }
7 Q0 Q Y( U- ?6 f/ Z5 ~' O
.bgc{ background-color:#aecaf9; color: #0033ff }
" z0 C. Y% V; [+ y! n
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
( [) t; S& \/ E# x; ?7 A/ j' V
border-bottom: solid 1px #4e7dc1;
' G/ ^. b! A# ?+ T% ]8 S
border-left: solid 1px #aecaf9;
" [" b3 W" s5 G: W! Q: t$ r7 K; W
border-right: solid 1px #5679bd;
* J9 M; R: d4 i8 \7 F! {$ |# q0 f
padding:1px;
: D/ M5 }4 b! [( J$ D4 u
margin:0px;}
( ^. b. S- E) C1 B
</style>
* L$ E" u, x$ {- {% }3 t
<script language="javascript">
- X3 i1 u3 n) X
<!--
4 N! `3 E: t7 }: {6 K7 g4 J
function rv()
0 Q4 ?5 N2 `0 \; M
{
: T& q e% F" [/ l9 g7 N
var val="";
3 d1 L e7 {' w/ n( p) p. f
for(i=0;i<combo_box.list2.length;i++){
' Z1 N6 Q$ E/ z& H; b+ z
val+=","+combo_box.list2
.value;
& v+ I4 y6 d7 g. x6 R& j
}
1 {) K" T% S% s2 k8 P1 O
if(val.charat(0)==","){
# I: i9 _( p) O( X
val=val.substr(1,val.length);
9 a9 A3 D G. Q0 V* S+ z
}
' E& ~1 S0 ?4 V- q8 e8 T( J* D
opener.form1.frecname.value=val;
* z$ [1 G( `$ e
self.close();
5 }; p9 D( n! M, O! Q9 t9 o
}
' d c9 X) \. T$ @, n5 X7 s9 R
//-->
' Z. @+ {6 K H: g6 h! ?2 V, _; l
</script>
% f/ C0 z4 c4 ]$ g
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
$ t) h6 w. L: u' J
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
# E# _4 E+ \9 s7 h3 B+ K p
<%
8 E7 I9 S% T) {1 s+ I9 Z+ Q( H! l
cdatasource ds=new cdatasource(); //数据联结bean实例
J" v. \5 @1 C0 f1 A! o& h
java.sql.connection conn=ds.getconnection();
" h; @) y3 f: Y1 b
java.sql.statement stmt=null;
$ Q# h6 ^ P t) M- i6 s
java.sql.resultset rs=null;
, w1 g" e4 U+ ]. }5 e% [
cdatacheck dc=new cdatacheck();
; ~# k' O. L9 b3 \" U. e7 d0 [4 G
%>
0 M" N# }. y5 V3 y8 E4 P( V& [, C
<%
! z4 U% D6 @! g
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";
# |# F4 S( }# @& E- h6 R$ t
stmt=conn.createstatement();
! [- `* `8 {) R& C6 G$ E# a
rs=stmt.executequery(sqlu);
3 \. t" l6 h2 u. O" p3 f
%>
7 z' Q! Z/ [5 N/ {& ?+ D- P' c
<script language='javascript'>
! z# z, X& Z+ ]; Y% W- G, x
arr = new array();
9 G2 k6 D7 s' D" n% i) P$ ?# Q5 r( O
<% int temp=0;
$ O; w6 Q4 J" f6 D8 B
while(rs.next())
* [" l8 p8 k1 @& C0 }! x& w
{
7 b7 t9 R6 X/ R8 u+ a4 v# Y0 _& Y* Z* w
%>
. L; Y* A: ^" ~
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
q8 b% Y; a" ^) U6 S
<%
8 v8 Y; d* q @% e& G) y
temp = temp + 1;
# }+ J2 T) k2 E0 k; l# ^! @6 j
}
- e% N$ O% p* c
%>
/ Z6 q9 e8 ]0 j$ {7 q8 m' V$ b" z9 G
temp=<%=temp%>;
3 x2 a. a5 q- E2 v( d8 b( j+ j7 [
function changelocation(id){
6 Z N; g! Y _# V w& r2 Q( C3 a
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
+ g3 Z( ^# f# {
var i = 0;
, v' j# k& O" A$ ~5 @0 A: J
document.combo_box.city.options[0]=new option('-------','');
/ V# o# Z0 L* l& Z# m
for(i=0;i<temp;i++){
3 X; T- J" {$ k/ g% A
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
~ k E3 U4 b; M6 a" a
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
" C% `( j" i9 y$ r) L
}
) v9 p1 U& d9 K8 u6 A5 X+ o2 h$ k
}
0 i, n( H7 I2 T6 M! o9 K1 E
}
/ t9 F% K$ Z- s9 w
</script>
' |3 X" B. R, X% y6 ?+ B6 Y. h9 {
# ]/ W* Z0 r' n, ?3 n$ t$ {8 x
<form name="combo_box">
$ V5 j9 |+ v1 e0 ?. s& V& l
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
& y+ `5 j# C4 R) b2 V+ M, {
<tr height="24">
- h9 o" J; ^7 R
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
0 I+ Z5 m. G$ A
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
; C! j$ |7 M9 v* p ?2 T y
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
0 G% o B% o0 d' `3 [% v; N) p
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
- P! f. O3 F5 I2 D! O* Z% J9 T
</tr>
' `, @, W2 h9 l, g2 h( I$ O
<tr>
; ?' ?( I! z+ F) q* h
<td>
2 U6 J b# k9 u. p- T
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
$ X+ o5 E0 ]& W) L- d. s
<option value="0">请选择部门 ---></option>
- t; { D3 @* ]' b7 q& \1 J, B! a, g
<%
- }# L7 D, A" X2 t; L- }2 y
string sqld="select * from tdept";
! t; \7 t! j- U0 o5 C
stmt=conn.createstatement();
' v X2 }3 Q% u# I
rs=stmt.executequery(sqld);
5 A7 K4 {5 G. b% ?0 Q6 R
while(rs.next())
! u! o" I5 ?# q/ R0 h& Q
{
0 a- w* d+ ]/ R
%>
6 U. b! b) G/ Z4 e4 s% z
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
$ _+ D3 o# T6 [6 d! F- c
<%
4 f0 f4 H0 `' q6 b* P8 Q3 J% }% ~
}
9 Q( f5 X. e+ S- o4 b, t% G
%>
+ U; b3 J3 \' t* x2 D8 f2 e( o* m
</select>
7 j$ m6 g% t3 d+ } t8 @
</td>
7 |/ ^- Y2 S0 O7 C
<td>
+ f7 Y6 v. _) ]
<select multiple id=city style="width:150;height:200" class="bgc">
- ^! E+ T8 z/ p' Y' W2 ^
</select>
5 z0 [: B1 \1 ?
</td>
3 A8 t0 h5 t' O; i4 o7 o
<td nowrap align="center" class="bgc">
* p2 B8 W# [; g$ `/ g6 C# n
<input type="button" value="<<" class="buttons">
" C, a2 A, U$ R1 u4 [
<input type="button" value=">>" class="buttons">
3 D* w% C, A- {* b% v. ? W; ?
</td>
' P4 n8 b+ @: L, _% U0 x' y
<td>
% w( @8 J1 O7 f4 Z# z' K P/ }
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
$ C$ v! R i- x" b
</select>
9 d/ [5 ^) ]/ K! F+ h# g
</td>
% q. G! `: J5 b0 c# E, R4 k1 d, o6 p: s
</tr>
/ ^) p8 B( t7 R& {6 `
<tr class="bgc">
: x- f7 ^/ d* |8 i
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
0 n4 x: [, m7 ?% \/ G' Y
</tr>
5 V/ B i$ \4 D: v/ O
</table>
V" k2 F/ e7 {! l. U6 P2 ~ `
</form>
/ s5 K8 A/ G+ M, M5 R- v
<script language="javascript">
) n0 k7 U. q% |$ S, \
//人名移动
5 Q7 x6 U2 H) N, U; T% g5 |) p
function move(fbox, tbox) {
% t6 [' O( L! g3 T9 w. B( o0 u3 e
var arrfbox = new array();
- j* x9 ?6 K3 d7 O9 \4 h# K
var arrtbox = new array();
' C" e% Z, j# _
var arrlookup = new array();
! y* }) l6 C6 M+ ^: E( o6 }
var i;
2 J5 k3 v* ^0 W; C
for (i = 0; i < tbox.options.length; i++) {
# W2 ? e5 m" y+ g% e" [
arrlookup[tbox.options
.text] = tbox.options
.value;
+ E6 i9 V* {, F
arrtbox
= tbox.options
.text;
8 ~- t. h& H r4 n7 S; ]" o
}
. b+ B5 ^0 _3 |9 Z% R# p
var flength = 0;
, |7 R) ` O; T
var tlength = arrtbox.length;
/ L) j' P& @2 K- T% }/ r
for(i = 0; i < fbox.options.length; i++) {
S2 ~7 d, r. j7 j
arrlookup[fbox.options
.text] = fbox.options
.value;
4 v. A, e: R5 T2 G! F
if (fbox.options
.selected && fbox.options
.value != "") {
# j, Y3 c9 J& i5 z6 Q
arrtbox[tlength] = fbox.options
.text;
! o7 x& k' L1 b* i& c2 J" p; s$ r
tlength++;
7 x2 D$ M* E" |, r
}
! [/ i6 K# G4 A4 g7 p
else {
1 r% d" {) N7 A1 [9 ~
arrfbox[flength] = fbox.options
.text;
0 v8 ]; u- x& ?2 t( t) n. u0 r( Q
flength++;
) `, h6 U. n; O/ K
}
$ p- t. Q* n: [6 O4 d8 z2 Z
}
" P1 d' f2 i. T' }
arrfbox.sort();
Y6 n$ }/ g5 ?/ s) }& Z3 o
arrtbox.sort();
% e0 X+ ?5 H' T# e1 \' g& m; x
$ m7 B, W! v) c& K
fbox.length = 0;
( D; d7 G3 K! B, `. [
tbox.length = 0;
: |( W4 D1 H! d, x' c$ J
var c;
# x4 ~" }$ `: T. z" Z: ?$ z
for(c = 0; c < arrfbox.length; c++) {
! e4 x' e9 y; K. q! t# m- @
var no = new option();
7 |4 t5 ^/ r' @7 E2 M( ^ R: Q8 G
no.value = arrlookup[arrfbox[c]];
9 U0 P; c5 i5 A- z: h9 s
no.text = arrfbox[c];
0 @/ M. B6 }6 M: q! ]
fbox[c] = no;
6 W( K; f% @, ^& z( V
}
- Y7 Q0 u3 m( _; P
for(c = 0; c < arrtbox.length; c++) {
' J" y! C( x0 A7 J1 P( A. i
var no = new option();
: V) _ _! h+ j* k1 y/ m
no.value = arrlookup[arrtbox[c]];
6 Q+ `2 ^0 t' U5 d5 [) ] {
no.text = arrtbox[c];
% ^' g* A1 ^- C o6 z. Y% J% ?. m0 L
tbox[c] = no;
3 O; |0 I, F% n s
}
7 G* d% I" m |* P
}
& x" d% q' e7 N/ g3 Y, ]2 R: e9 A) k$ u
</script>
) C# `' K7 G3 l4 r6 n3 o
</body>
8 t$ k( I* B- Q s1 w( I% n9 E9 R
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
