标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
; [. {5 v; o" H/ t4 F1 e3 T9 l/ D
c pageencoding="gb2312"
$ c! M8 {/ C6 R5 t9 s8 h9 ?
%>
3 M- E0 z) ^4 |% ^+ W: t
<style>
1 [% k9 K) F! J# c3 T
.f9{ font-size:9pt; }
$ E% V. |, [% d; \" L+ ?/ H* N
.bgc{ background-color:#aecaf9; color: #0033ff }
2 ?+ Q/ j5 p4 E! b1 W. u
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
$ O' p) w. |, E+ d. y Z
border-bottom: solid 1px #4e7dc1;
, ^+ B& ?3 l9 ~* Z
border-left: solid 1px #aecaf9;
. S. Q) m5 L" }# C0 L
border-right: solid 1px #5679bd;
- z% ^5 J& d# Y8 b. S
padding:1px;
2 B- ]+ a: ]2 r8 z8 ^# N; q
margin:0px;}
7 v7 k/ \0 {( X0 [% `
</style>
$ G P% |# A; g. |' M! z w
<script language="javascript">
" g' }1 l9 ~) q7 A7 |8 I
<!--
; h3 ]6 I; a- N: ^. b* J7 M
function rv()
) Q) F0 v: l0 B
{
. `$ R8 g N1 d5 o1 [
var val="";
3 o9 n( p: T3 ]1 ~ u7 y& @! M
for(i=0;i<combo_box.list2.length;i++){
* A' z5 \/ y( X! ^: A' u
val+=","+combo_box.list2
.value;
: V# A8 M& V+ y! O6 h }- [2 k
}
4 g' k8 Z1 m, l8 L! z
if(val.charat(0)==","){
: O3 |! A7 {. r; a& w
val=val.substr(1,val.length);
* c2 |2 T$ l- D6 y2 a
}
7 Z R, E `, q; D0 f( ` X; w
opener.form1.frecname.value=val;
$ y" |0 {9 ]4 s, Y |: T( R9 ]4 I1 b
self.close();
. z3 a8 @! S# M3 @' m
}
& V/ d# |' R$ W. d8 N9 B0 W
//-->
8 { A( M- c9 N3 T; i, f
</script>
0 z7 q# H% \$ y" B7 X: Z4 J( _; H4 H# l
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
, C( w% }6 c. [; O1 @, R2 P
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
2 F' J: c% ]" ^
<%
" ]0 Z. n) V% c$ W7 E' y( c
cdatasource ds=new cdatasource(); //数据联结bean实例
0 d0 O! Z5 ^ `" N) [& ^
java.sql.connection conn=ds.getconnection();
; q$ W5 E/ R) b( X1 W: h
java.sql.statement stmt=null;
8 D# K1 D) f5 H/ ^8 d
java.sql.resultset rs=null;
( B* o9 Y- M+ m, o
cdatacheck dc=new cdatacheck();
. f# x) M2 G9 y+ Q" [; T9 R
%>
W2 P5 q1 T% \' a
<%
& H( e1 M1 G- M. N7 J
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";
6 J1 S4 d% v4 R* B( a, ~ i, m- l y
stmt=conn.createstatement();
3 O2 Z" |; U& v: U2 w6 u
rs=stmt.executequery(sqlu);
/ Q* H5 u" D2 f; w' e& U3 _
%>
' B1 r6 W9 u7 B$ k: ?2 b" Z6 u
<script language='javascript'>
$ ?4 H# W% F0 s0 H
arr = new array();
. q2 I4 V% m9 f' v
<% int temp=0;
6 ^( a1 q2 s# t" ?: E
while(rs.next())
! H5 a- M+ U# W G9 e! [
{
6 u. l9 J7 [( H
%>
. ~5 C; S" x# e8 Z9 v
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
7 c# [, A5 r5 k- d- s" L
<%
" m: {' j9 c) w
temp = temp + 1;
. v+ [% B" d. ~! s) E
}
: n- F _- J" `- C9 J
%>
3 ~" }+ G J% I+ v
temp=<%=temp%>;
# w+ ~& G* W& D. h
function changelocation(id){
/ T! D% q- L/ O0 H8 }
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
/ R6 F5 [4 ^2 Q' t- Z" M8 @$ k
var i = 0;
9 ~4 j- s4 B" p- ?6 b1 o1 L) P$ k
document.combo_box.city.options[0]=new option('-------','');
2 @# n0 I$ n& |! K4 X! X
for(i=0;i<temp;i++){
8 I) F8 P; F. w0 T
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
g j. C. e }6 R
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
B9 g6 C/ ~ _' N
}
. W6 ~, H5 V n |
}
" Z* y ?0 P+ a! K2 m. Y4 s
}
, O9 X2 p$ g- u) t
</script>
0 O; N9 M& r" r. ?1 ]4 Y% G# |
: |) l1 \* x L3 _* Q
<form name="combo_box">
2 y: Z' G: Q' u& A) c1 w* a( {1 s7 L! x
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
' G7 h& M* d; s& v
<tr height="24">
7 W5 C* f5 b/ L1 w. s
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
3 X( H6 ]) K: i2 @
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
0 q6 J6 X& l( p: W% r
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
4 y3 m7 m: \) P7 ~
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
, z% ~$ l: y3 J6 n4 l
</tr>
1 H7 f- r" }% @7 q& D' F9 @& K3 n5 Z
<tr>
3 X7 Y3 x8 ^2 J" ]3 n5 j+ A+ s
<td>
, b5 w% ?8 K. a. Q) V4 X
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
( W3 {3 d% }4 B. \3 V
<option value="0">请选择部门 ---></option>
! n' ]; N% b( N( u
<%
+ S4 j6 j9 C3 \( e! x* E/ n
string sqld="select * from tdept";
3 A0 o4 V# S3 C. V5 b
stmt=conn.createstatement();
' H& W& x8 Z3 L8 m% f
rs=stmt.executequery(sqld);
5 Q6 f2 [* ~/ q x9 `, h& w
while(rs.next())
9 ?) G& J- j* C7 V6 Q6 D
{
5 y) ?) y$ k0 r& Z" z
%>
3 a1 D' c* Z: m3 F
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
: j: k R5 V0 K0 P5 z
<%
1 I6 u9 B: O1 k+ |. b9 g7 B1 d5 c& B
}
7 e L: V1 `8 g
%>
# f: f5 Y+ c1 R+ |
</select>
J" o# K1 C# h5 m1 L
</td>
$ n% M& x4 J; |. F3 [9 {, I
<td>
% D9 t5 a$ V/ `( x/ R
<select multiple id=city style="width:150;height:200" class="bgc">
1 R. u, v! N( l2 E4 p: d* P2 _* S5 }
</select>
8 k* }! b2 _1 G& a( H; f
</td>
) @- r/ s- R. V/ ]- q
<td nowrap align="center" class="bgc">
* |$ Q1 y7 Y0 Z1 a; E* `; ?
<input type="button" value="<<" class="buttons">
" Y6 t; e$ h5 a2 C) i
<input type="button" value=">>" class="buttons">
+ R/ F$ ?% c1 `- ]
</td>
0 l' Z7 j& v# F7 H
<td>
2 ?) V, b1 y: o2 N9 B4 G
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
, Q3 ~9 i! e; V
</select>
. C, u( {& h7 G1 J$ N) ~; S+ ~7 y
</td>
" D1 Y7 w5 `' L% A: R
</tr>
* W5 Z" j# k: Q& a# D# i3 E
<tr class="bgc">
4 w1 m0 {. J: r7 b
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
% v2 e7 E# u5 Q
</tr>
5 }5 u& H9 o8 ^0 I/ y# d
</table>
5 z3 s8 q7 b! k9 l
</form>
5 q7 \. v0 k6 T& @- `, \7 \
<script language="javascript">
/ |0 ]3 l0 f3 G g
//人名移动
2 F* {5 X" I7 r5 d7 T1 P
function move(fbox, tbox) {
: ~& |% L T8 M# U: q7 {1 \2 G
var arrfbox = new array();
- Z: [, W' W4 X8 T' {4 n
var arrtbox = new array();
- }/ n0 z V6 I0 o% L2 [' `
var arrlookup = new array();
! t2 a( K+ F0 j1 I6 v
var i;
6 y. ]0 [9 A4 b/ u7 w
for (i = 0; i < tbox.options.length; i++) {
. [- q" ]8 z( n1 L* \# B+ ]
arrlookup[tbox.options
.text] = tbox.options
.value;
; X! \8 {+ R4 ~! p% X9 v
arrtbox
= tbox.options
.text;
: w$ ~- i C. P/ \/ K2 _/ u
}
/ V% M- E+ A* A1 G! V& p/ ~% N I
var flength = 0;
! z( D( o) f& Q% t: T' d# f( [
var tlength = arrtbox.length;
0 k+ g) Q, ^$ P3 Z
for(i = 0; i < fbox.options.length; i++) {
; ?9 `4 u( c, b8 P7 B# g& Y
arrlookup[fbox.options
.text] = fbox.options
.value;
$ l+ `$ G0 g6 Q; b+ W1 S
if (fbox.options
.selected && fbox.options
.value != "") {
# s' v8 a/ E. f4 C- ?5 C. N
arrtbox[tlength] = fbox.options
.text;
/ w) R3 s, E# y) k
tlength++;
. G! y. W3 K( [$ v {
}
/ L* S6 ^& W& {* H9 g! w
else {
( D8 E B/ G) I8 |
arrfbox[flength] = fbox.options
.text;
% @2 @ a* k# l; X) r. x' O! |
flength++;
; k5 G$ ]$ l% U& k% c3 o' ^ n3 Q3 \' M
}
/ W8 r2 j4 w& M- d
}
7 V- A% C$ U# A8 f5 y
arrfbox.sort();
' C; s% y6 A8 o: C( C8 r( C
arrtbox.sort();
) ^1 w7 e( R$ i: H8 Y0 z
( b8 g; `5 e0 V* s, P' j
fbox.length = 0;
6 @2 Y# G# ?) b
tbox.length = 0;
4 c9 N/ @: W% L5 W C
var c;
* Z7 D& O1 f8 Y# Z9 u+ k9 e( t' K/ N
for(c = 0; c < arrfbox.length; c++) {
0 F3 f) G/ J8 J$ `) o$ m& n; d
var no = new option();
8 J# @- j( J2 f5 ?& T
no.value = arrlookup[arrfbox[c]];
6 s5 J7 C( U9 a$ Q
no.text = arrfbox[c];
0 u( S4 D: @- o
fbox[c] = no;
- O" z0 B7 g; H4 b" ]) g) m+ K- m
}
- l! Z& s6 A1 w7 ~8 t
for(c = 0; c < arrtbox.length; c++) {
1 w* Z; ]0 g3 `
var no = new option();
5 x/ A8 @$ p5 |
no.value = arrlookup[arrtbox[c]];
5 n2 @$ s R. s0 s: }& f9 u2 b- O1 j
no.text = arrtbox[c];
6 |* o9 ^8 Q ]( t. z
tbox[c] = no;
5 {7 d4 ?/ b: Y! v0 X' r' L" b
}
% T: [$ K- Z* J5 f. m0 {
}
" `. f1 i1 ]2 x9 r" p
</script>
" c' S; v$ m; H0 i* G- _ ^/ k+ \
</body>
3 D" O" y2 n' i1 t- }
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
