标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
# T4 [0 @; \+ p
c pageencoding="gb2312"
: M9 I+ l1 O7 f1 J/ w# X: y
%>
$ f& S+ `1 O- Q- a
<style>
% Y! E3 {1 z, x, a6 D2 N" |
.f9{ font-size:9pt; }
" @* m( v" G7 K, a+ `" N0 O) M
.bgc{ background-color:#aecaf9; color: #0033ff }
0 A5 A! Q- _3 ]& O! ?
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
3 n- t2 Z; E0 M9 W' w5 ~4 z) l
border-bottom: solid 1px #4e7dc1;
/ \4 O I3 B. I" y; a
border-left: solid 1px #aecaf9;
' `% z9 i6 q3 h/ {, }' q9 U
border-right: solid 1px #5679bd;
+ N6 B, X8 f ]
padding:1px;
- c( s# D2 _* S8 }! z" U( w+ @2 A
margin:0px;}
- U, Y& ?6 f5 S) g) g. i& Q1 C( V
</style>
. J; V, r7 L* H9 _
<script language="javascript">
% H1 J, n |) [0 ]# F3 U) l
<!--
7 N6 G) t, W, d2 y: u7 ?
function rv()
6 t1 N: g3 @6 q/ C ~) n& v! v, x
{
9 c2 x% f9 O' D
var val="";
; ? E2 Y/ V) I, U8 b
for(i=0;i<combo_box.list2.length;i++){
" d, @+ N* K4 M% ~' ?! m, U" s
val+=","+combo_box.list2
.value;
5 ~% r6 X3 W" g4 K7 k- z
}
! N& D+ e( ?) F8 G' }. b' p. P" I' V
if(val.charat(0)==","){
5 e& s% e6 S) I9 ~+ |
val=val.substr(1,val.length);
4 J# A& x$ ?! R, q2 R& a! {
}
# M; c, e& O% N
opener.form1.frecname.value=val;
! B8 _9 I0 C3 R( |. h' u
self.close();
* s8 E; v/ n E
}
! ~ U; q" ~; m0 V3 }
//-->
2 B& ^4 W7 v, Q1 w I
</script>
6 P) E I# w4 B) F, S8 \
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
" o1 ~/ q9 T+ S( M- [; ?
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
2 j+ t2 \) C: w6 m& {
<%
% C- C J( m- S: x- w2 l6 z! e
cdatasource ds=new cdatasource(); //数据联结bean实例
- Y5 |5 o1 s) d" h
java.sql.connection conn=ds.getconnection();
0 g9 i! `: J+ H
java.sql.statement stmt=null;
8 c8 c2 d2 @+ b7 L9 j7 i
java.sql.resultset rs=null;
8 _( z' G. e: S, q4 F# N& a
cdatacheck dc=new cdatacheck();
7 I* a6 `/ l" A2 |8 L+ R
%>
7 n _9 k+ v; H# l1 _7 f
<%
+ H- a8 s+ E9 Z7 Z( y# w* m5 W* u, [& [
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";
& v. e; Z9 S4 Z5 P, N$ m9 C3 |9 E: H
stmt=conn.createstatement();
3 b" S p' k9 Q4 Q
rs=stmt.executequery(sqlu);
1 Y6 R1 K, E+ E$ e
%>
8 }! X8 I$ M' n
<script language='javascript'>
# Z9 b$ s8 L( _' S
arr = new array();
U: `) L, \! D# s0 ^
<% int temp=0;
$ F/ ^' h# h6 @0 i( L2 ]( Y
while(rs.next())
% m( v' S9 |( U7 h5 @5 G
{
8 g# x" i1 F* q( o/ R4 O
%>
: z+ j! u3 @9 P
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
5 c* f7 n2 Z, _) \ M% P3 U O
<%
4 ?/ D2 S) H" X: d! {5 j0 ^ e
temp = temp + 1;
& N1 O8 @* J2 F* X, x+ N8 N
}
+ z& V1 E- m) i& X: D
%>
1 b- a! F9 F- ^* s; F
temp=<%=temp%>;
$ M, [$ U" @; {: R1 W
function changelocation(id){
! y- x; U, u$ r8 ~
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
1 ?- B7 a1 Y1 N& }$ J, R, V
var i = 0;
8 Y/ q, p' V! o. [5 s
document.combo_box.city.options[0]=new option('-------','');
2 j/ z; p" ]3 M1 X
for(i=0;i<temp;i++){
( `: t+ j5 `6 P
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
+ ~$ L* O0 b! o* J6 q
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
& U8 Z7 P+ H7 J8 R& A9 j
}
5 e g: o4 p* M/ A! a' C
}
* b4 H$ R3 m5 F( p& G8 \
}
% [7 O O- J' a& v! M. f
</script>
! F( j) N0 \4 g3 L( b# \
$ d; h& ^3 P& E# Z4 D7 k0 p
<form name="combo_box">
" J+ S3 N6 y3 g# X7 a' |
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
% }7 x- v) _6 ~' V0 t! N$ m( z1 e0 Y
<tr height="24">
$ {' J# e, m" O" O& L$ T$ e& @7 M9 Q
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
7 h) H5 o! I- H7 `! F+ i/ n' j
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
1 s! @/ I: o @( s x
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
0 C# J, Y* d' |* x* Q1 G0 v
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
9 }! M2 b) o$ D _& s: R8 G7 h
</tr>
3 X7 r, Z" z) `: ^. O- y" I
<tr>
- N$ P0 J7 @( D; K- F
<td>
4 V: s' G* _& g9 F7 b$ x
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
[8 t0 k9 D3 N
<option value="0">请选择部门 ---></option>
0 n) X3 G5 C: j" k
<%
: a. ~4 |, Z9 C" p5 D
string sqld="select * from tdept";
6 R- C+ I+ L8 i! T, Z
stmt=conn.createstatement();
, o9 E7 h4 V4 F, @" k
rs=stmt.executequery(sqld);
9 p0 Z/ h4 d' O" b
while(rs.next())
7 ]* }! w5 @4 ^- t6 g( ~8 e+ ^5 \
{
/ E+ c# w& K! R- ?6 }3 V6 Y) P2 W
%>
2 q; H( k+ Z; B7 S7 q
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
% G3 \& T8 `$ [7 a6 T) g
<%
+ J( M1 C. J, T, ^. x' s/ m
}
9 Z5 x7 b# b3 T& K' Y8 P: |' {7 k
%>
% P- ~' W5 _+ F2 j
</select>
6 B# X0 {+ {& f0 [6 [
</td>
' N1 [5 i6 t% W6 @3 K
<td>
1 e2 }3 s3 T+ I4 T, T+ u
<select multiple id=city style="width:150;height:200" class="bgc">
+ x4 h8 \! K9 N. B4 r4 G% ]
</select>
4 u. N0 \5 P# T1 ?$ H3 n* L- G
</td>
2 ~1 n' k1 t% H1 Q' ]
<td nowrap align="center" class="bgc">
/ _5 Y& H K8 C3 X
<input type="button" value="<<" class="buttons">
. k) o: C9 |, _
<input type="button" value=">>" class="buttons">
( t- K: G1 H; z- I6 d5 F, J! j0 g
</td>
# b2 S2 y; v- ~9 `3 P& ?
<td>
5 l+ e4 y* E& k: w. n8 f2 x7 P5 }
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
" k3 l. `; I8 K# ]" X
</select>
. ?% \, [; r8 {) h
</td>
# U9 Y6 `5 }( y( Y
</tr>
: D7 d$ P2 p, w- y1 u3 o% b
<tr class="bgc">
% q, [, K8 H7 E. `
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
, ^- o- e# X- e5 r. S* U
</tr>
: { D5 n. G2 G( E) x F/ ^
</table>
. ?" G3 c' H: a; \
</form>
$ c/ K& K& [" Y, [" i
<script language="javascript">
3 N0 D0 Q% K) ]7 ` d, U3 I
//人名移动
' y$ D w* d! \% D9 \1 l
function move(fbox, tbox) {
7 y5 E" y# \) R3 L1 a% }# \
var arrfbox = new array();
6 D0 f1 k# c6 j
var arrtbox = new array();
9 I9 l) k6 F' n4 ?5 ~) L9 h) m
var arrlookup = new array();
J0 W+ t) F# q
var i;
; R6 Y- [+ u" I$ e
for (i = 0; i < tbox.options.length; i++) {
% O ~# f$ B: r8 [6 Y
arrlookup[tbox.options
.text] = tbox.options
.value;
. o7 F% a0 ~5 E) a9 F0 U& l
arrtbox
= tbox.options
.text;
( @" E# I7 Z& Q/ z; p* T
}
( @6 y8 V; x) K C; t, X
var flength = 0;
% R6 r* O! Q. \$ X" b1 @7 m
var tlength = arrtbox.length;
/ P# y. W1 t2 l* M F* ]; s
for(i = 0; i < fbox.options.length; i++) {
1 f/ q0 e5 f8 }" F' z" }8 _7 N' f* _
arrlookup[fbox.options
.text] = fbox.options
.value;
! P6 Z& ?5 D6 J( Z E
if (fbox.options
.selected && fbox.options
.value != "") {
2 l# N& t6 g# z6 t% y
arrtbox[tlength] = fbox.options
.text;
+ N: y' c% Z b/ Q1 G7 j$ S/ J3 r
tlength++;
4 o4 _) W% ?4 B
}
0 N! K* J6 g& g
else {
8 N# v" p. o1 ?- L0 f
arrfbox[flength] = fbox.options
.text;
: @0 t. B# R1 p& M- f7 \
flength++;
' i( H; p& \6 q+ q
}
; F! e. C; G) d" e$ U3 g
}
: E' }6 F& @ i/ W2 f$ {6 I; \0 i
arrfbox.sort();
3 F/ C" F3 p$ Z. j G6 S, p
arrtbox.sort();
" V9 V# }, W; f. b4 I, E
9 p3 [! p, F2 E: ~9 S) ~
fbox.length = 0;
4 v- B: z4 q& K Q
tbox.length = 0;
2 w: O7 B" S" k/ c/ M/ A& t g7 @: T: D
var c;
9 Y, X. ~, _ P' L4 X; H- B
for(c = 0; c < arrfbox.length; c++) {
% W% H) B ~: I* w
var no = new option();
$ ~* `3 t: @+ p- M c3 `0 u
no.value = arrlookup[arrfbox[c]];
8 @% q8 \8 Q; V$ B5 M
no.text = arrfbox[c];
5 g! v q5 f) f& Q
fbox[c] = no;
$ H4 C: z+ ]% e$ f4 z9 Z. z; _# d
}
8 e! n: `- f$ G4 Z4 Z% t/ q
for(c = 0; c < arrtbox.length; c++) {
1 A4 L! |6 u o7 y! D! w
var no = new option();
; N" ^; c- Z2 `0 \
no.value = arrlookup[arrtbox[c]];
- c' [6 P9 m) A0 H3 ], A/ T
no.text = arrtbox[c];
3 R1 s. l) C. T
tbox[c] = no;
3 ~5 C$ F5 O8 c4 n/ H
}
a& W/ ~8 @7 ]" m, w. S3 V
}
, @, s6 N/ o! w2 F
</script>
9 |: _4 d m2 m
</body>
6 z& g- s- s6 ~2 H
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
