标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
6 W4 Z# S2 L- B
c pageencoding="gb2312"
6 `4 J( d. T1 c- m: i* M2 ~
%>
+ W2 r4 N1 _, y6 C" F
<style>
2 Z3 H2 j$ Q7 v9 q1 q' w8 |, g* c. ]
.f9{ font-size:9pt; }
8 [% L" O4 x: f5 ]
.bgc{ background-color:#aecaf9; color: #0033ff }
# y- _* Q) O5 E4 l$ C
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
/ S7 R" K# b4 w/ g
border-bottom: solid 1px #4e7dc1;
0 P: z O; r" w' t
border-left: solid 1px #aecaf9;
4 w& Y7 g/ q+ y5 E
border-right: solid 1px #5679bd;
M" [0 }* k/ h4 R, @& ~
padding:1px;
/ d* M7 q7 ?. Q/ b) R
margin:0px;}
/ [1 F# S" X$ \
</style>
; l9 _# j5 u. f. w# X
<script language="javascript">
1 {8 M" r9 U& _! n9 T0 t i
<!--
! t N1 R; z$ Y4 ~
function rv()
, Y% E4 I* ^, t j- g. {; L0 r6 T: X
{
& S& Z/ W- ~: C
var val="";
9 \/ \( `+ I" N2 [7 T! _
for(i=0;i<combo_box.list2.length;i++){
2 L5 s2 d, N0 p# H" O& H
val+=","+combo_box.list2
.value;
; L6 o2 [; D" q+ R6 f
}
7 a/ n3 n; J* v) N
if(val.charat(0)==","){
3 D7 b( |' }1 X) m% [ t- Z
val=val.substr(1,val.length);
" m- N, g8 q! h+ t- M3 v8 m, k! ]
}
9 w E9 Z; c5 P- Q2 X/ u
opener.form1.frecname.value=val;
" [/ _: P, |$ S$ Y% A) t) ?
self.close();
6 `/ L/ S( N8 `) Q7 {
}
; c s5 r1 O4 P9 D; n, s# X' u% q
//-->
, B% j% O# m& Q7 w2 f3 j
</script>
5 z4 Y! {. W9 L) n) f
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
0 ~: _) m2 P/ |3 N( q
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
; H0 H6 F8 `& [" N1 F' B
<%
0 J+ d" {9 K2 Y: [
cdatasource ds=new cdatasource(); //数据联结bean实例
7 t0 M. [, e+ @! ? q! W* }
java.sql.connection conn=ds.getconnection();
4 |+ P; g& ?: l/ M* [
java.sql.statement stmt=null;
2 t6 g( @9 k" J# p# S7 f- I2 V* ?: g
java.sql.resultset rs=null;
' d1 f3 H* i! c$ n: a
cdatacheck dc=new cdatacheck();
9 a) [' ?! `5 U, {- c# c
%>
; {+ g& Z( o3 M; `* ^# y8 B- G: U$ \2 K
<%
: u: k" J. } d8 \$ k& T6 H
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! O# K6 {/ j/ J; a& c- s, f
stmt=conn.createstatement();
6 k) g S ?5 d; T1 \: W
rs=stmt.executequery(sqlu);
* X' {/ m- H! y. x
%>
2 H4 Z3 Y2 P+ [$ A5 O) o
<script language='javascript'>
+ q) | W( c, L" |: _& }/ f+ Y
arr = new array();
: x, ]3 X4 E7 h- w. k q
<% int temp=0;
4 P, y% {5 g# g5 i
while(rs.next())
: L: m8 \% g' t0 V, j9 G1 R
{
. t$ ]4 H+ i2 s4 a
%>
& ?' ]4 R2 i- E3 Q) V' d( \
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
* \! \4 q0 n6 u
<%
. n. e' K ^9 ^1 I/ c X
temp = temp + 1;
& ?3 v l8 v. M% s5 r
}
2 D- C- p) \" P8 F3 [0 L
%>
; E {7 i1 k" _% n/ T! s% {
temp=<%=temp%>;
5 J7 w9 f$ v: s9 j4 Z# M
function changelocation(id){
* K9 n' d F+ l) C9 B. L1 ^
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
+ P; u$ D* \- n/ @
var i = 0;
5 w3 j7 g. o2 F$ G* x
document.combo_box.city.options[0]=new option('-------','');
- X Q; H) p7 l4 T8 Z5 z% J4 d2 w
for(i=0;i<temp;i++){
4 K% _; Q9 R6 {4 I/ [
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
% N& e! y" [! P
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
0 k9 P( }0 B" j
}
0 ?* W5 b; F( ?% \6 d/ U k
}
' c' r+ b- {3 \3 j- {
}
; t: R6 B/ m1 ]$ C% u6 I
</script>
9 U m1 I, ?. |
7 ^+ F7 T6 v6 \ ?* M: t
<form name="combo_box">
4 J# }3 F3 c% c# f- Q! Q
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
1 r8 b, ^8 v& k! t4 c5 n8 F9 T: ?
<tr height="24">
" l- n# M; a3 y: r% N: t! o! \
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
U2 U8 n9 n& r/ v! h
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
4 j, L* T! ?9 u1 B' M+ M! m
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
' `0 W. l. s0 _% y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
8 p; @# u$ l5 C/ x a6 O! T% Q. B
</tr>
3 g J6 Y) G, A$ L9 a% g, W
<tr>
: K1 p" @$ u. w
<td>
2 [& S1 T" {! |/ Y* t
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" _; f, t; ]4 I& G- m
<option value="0">请选择部门 ---></option>
& O1 _3 ~1 k( x- b
<%
0 E) l! g5 J. ?9 w# [
string sqld="select * from tdept";
2 w6 p0 e) u, f) b* \
stmt=conn.createstatement();
6 M, I" A" o( b% Z
rs=stmt.executequery(sqld);
" e" ]3 G5 s4 K( T/ \4 Q, [: ^
while(rs.next())
1 V6 ~' G2 M1 u8 G: |: k
{
- j- G' \# p; q) Q V2 G
%>
2 U' y: T% e: @
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
# g8 e, r! T: O6 h- Q# b
<%
# [% T; s, w F" l
}
b; R7 y' |: P* }2 k( }
%>
8 h) O9 t1 J2 A: q1 i; y, `
</select>
k* ^0 X9 p C/ Q6 V
</td>
* D: x/ o9 c2 _& b
<td>
. {8 I, W& b8 N* F1 |
<select multiple id=city style="width:150;height:200" class="bgc">
* h9 m* D7 Z5 }7 U b$ c
</select>
& I! c# \6 F9 N& N$ ^0 p$ m+ a% I
</td>
0 H( ^2 R# m2 G
<td nowrap align="center" class="bgc">
6 ?' E' u4 Q5 e9 _, M
<input type="button" value="<<" class="buttons">
# T$ U0 W3 T7 \/ |
<input type="button" value=">>" class="buttons">
/ b9 \' ?' @% E5 A) y
</td>
. @7 J+ ~2 n7 H: |
<td>
# V/ k' K3 G1 i. I6 C
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
. J8 l) |3 _' j% D9 r, q
</select>
+ |4 F# S& {' z" d& h2 M- i0 ^1 G* G
</td>
/ t! F& S0 i6 Z* {. H
</tr>
: y' |& r* F! D. i. X
<tr class="bgc">
6 Z$ g/ R& C$ t- c5 T/ ]4 y
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
7 U7 L" W; Y) B, S o* [
</tr>
2 ~/ a8 H& t; u A$ R5 F5 L
</table>
+ `9 I6 ]( V: r! [2 O! Z% {$ R
</form>
; n5 p! Q; |/ }' b; Q
<script language="javascript">
8 N) j+ ^* P. g$ W+ e' p1 ?
//人名移动
+ i4 _; k9 {8 i& v
function move(fbox, tbox) {
4 [1 O5 f ]9 \. [
var arrfbox = new array();
' x; h& c* D/ ~ G& M9 G
var arrtbox = new array();
5 I! v5 ^0 i! g5 x5 d
var arrlookup = new array();
3 F7 I5 q# `9 U8 l( }+ R& |
var i;
# S) ?: ~' b6 N# I; @7 a
for (i = 0; i < tbox.options.length; i++) {
0 o2 y0 ~+ I' `; |+ E: K
arrlookup[tbox.options
.text] = tbox.options
.value;
9 @2 [; f/ p1 _9 ^- ]7 }$ g
arrtbox
= tbox.options
.text;
1 K) N0 g( B: S; b t
}
. S6 o4 u/ ]$ D) N. P+ u! z
var flength = 0;
# l9 x6 ~% c( Y# L: X4 y
var tlength = arrtbox.length;
9 }7 W& k# r$ k- Y
for(i = 0; i < fbox.options.length; i++) {
3 s/ t5 @9 W" o- W
arrlookup[fbox.options
.text] = fbox.options
.value;
% M T# g' y: N
if (fbox.options
.selected && fbox.options
.value != "") {
/ k' r' }7 s# g6 P
arrtbox[tlength] = fbox.options
.text;
8 o1 I8 y5 x5 S
tlength++;
1 Q: W' W+ q$ n0 E
}
. H& x4 A% L& h9 g! U7 L/ q/ r
else {
. M; v1 E, ]7 M% S7 Q& _
arrfbox[flength] = fbox.options
.text;
% ], U6 y0 A' ]* D# @- f
flength++;
* k$ \0 D( T' l6 p) w
}
" b/ s8 [; |( ^7 D/ A$ P
}
5 H- g3 V+ a- \( @4 d) W: ?4 R
arrfbox.sort();
2 p" x% N, e* X& W6 C' V
arrtbox.sort();
( W& p# f5 L2 s) j
, O# y7 E3 b$ v& r$ a0 ^
fbox.length = 0;
. o: s. _" @5 @- I& K/ M
tbox.length = 0;
+ s: V9 L/ Y( J2 Z. ?4 h+ H) I
var c;
6 ? u5 F) P' u8 o) A2 `3 l
for(c = 0; c < arrfbox.length; c++) {
+ E3 e. p8 z2 D% N0 y
var no = new option();
* { a; b7 ?+ R; o" T ^* l9 ?
no.value = arrlookup[arrfbox[c]];
. n/ W; N; G- Z& h" G
no.text = arrfbox[c];
* B- `/ [4 A- o# I0 l7 e$ y
fbox[c] = no;
8 k' F: Y7 H4 k
}
9 `, |# f9 x( u) N* U
for(c = 0; c < arrtbox.length; c++) {
7 O; _ Z9 ^; u. S8 _# D% J- z
var no = new option();
1 ]1 }+ H+ }3 |6 B/ j* Q
no.value = arrlookup[arrtbox[c]];
# \; o8 t/ Z/ V& r+ z
no.text = arrtbox[c];
* e) _! J9 F- a
tbox[c] = no;
A! p# b2 U& x, U
}
/ @( U N: S: o
}
2 D1 S- Q7 z3 H! h+ ?0 u. \7 b
</script>
3 y: j% T) f2 T- ~: U- c5 ^
</body>
0 U8 K u+ ?/ w! I4 o: P
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
