Board logo

标题: jsp+javascript打造级连菜单 [打印本页]

作者: admin    时间: 2007-12-5 17:43     标题: jsp+javascript打造级连菜单

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
5 u3 P6 E; y: N6 N8 s, D1 t         c pageencoding="gb2312"$ V, X- p* E' @( M, g" B
%>
& L% A9 G5 ~5 {; C2 N<style>
) s5 f/ e% {: P' v.f9{ font-size:9pt; }7 S$ f5 B  \* X  l
.bgc{ background-color:#aecaf9; color: #0033ff }
6 a4 ]" s4 b( U7 q.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;+ j7 K; o* a( o) Q) n
  border-bottom: solid 1px #4e7dc1;" f. p+ W$ v/ p- g% d
  border-left: solid 1px #aecaf9;% q0 a0 J1 T5 w3 J% P1 A# |) A$ {
  border-right: solid 1px #5679bd;
8 m3 V* `" x, }0 U  padding:1px;
" p7 c- E! a. f+ z4 K  margin:0px;}
9 Z. ^0 r' H( a7 t4 M) U</style>
2 l3 e2 N  Q5 F<script language="javascript">
2 W. `6 {( `3 V$ l6 P$ l<!--; _+ |: \  ~) }' {/ v! N
function rv()5 S6 G6 i0 \6 I
{
) [  Q7 b) Z2 k( E# H5 o  var val="";" b$ b5 z9 p/ z0 e% E2 W$ O
  for(i=0;i<combo_box.list2.length;i++){
( @" A0 @. d# e1 I" u' J4 ?4 f   val+=","+combo_box.list2.value;, X( p8 U# [! u% B- R5 m  T
  }8 E* ?! H7 Z! n+ Z4 c1 X
  if(val.charat(0)==","){
0 o" k- X- {' d3 v   val=val.substr(1,val.length);
, o" u) U6 T2 s. H+ W  }
5 s2 j* D) y9 |- ]1 g" k  opener.form1.frecname.value=val;
" ~& g/ [  n( A: x4 f: T# x0 P  self.close();
- Z  O7 T1 C  T, r8 I- f7 g}
5 b# N6 L/ o4 Q6 r, I" I5 q$ m, E//-->
: D, q4 j1 s: o6 p. ^2 |. x</script>; h$ E7 [2 p3 d/ E* @7 e/ x; B4 L1 }& a
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">5 `* Z9 P6 h5 E6 ^+ f) }( g# I
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />2 Z# c9 m* W2 T4 Y9 A7 [  e
<%; F( T& g& ~( p+ Z" _
  cdatasource ds=new cdatasource();  //数据联结bean实例( q6 x% C0 o% h2 I% ~3 p( q) W% h
  java.sql.connection conn=ds.getconnection();
" _/ {' w' H/ y  java.sql.statement stmt=null;- \8 ^+ x5 Q+ V* m# D2 E8 O0 v
  java.sql.resultset rs=null;
1 i) F# B/ T/ q% w) [% O  cdatacheck dc=new cdatacheck();
5 |# m" g  z9 s, y: @%># f+ t, y3 n+ r9 L! ]! @; l
<%+ I$ M9 g/ Q! k; t" e
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";) Q3 r8 q9 D2 L4 o, f  Y
stmt=conn.createstatement();
$ G' K% x  |; U8 {  b2 Qrs=stmt.executequery(sqlu);
$ _6 P8 B* c) z! `%>
, ~' \% _# p2 U9 a<script language='javascript'>
0 g- A: V$ d3 G6 w0 @arr = new array();
1 g# |  c( C- K9 p6 i- f- Z<%  int temp=0;
/ g5 b' y& l6 Vwhile(rs.next())( I- P- H& B" F: V
{
+ L3 g( z* x3 H) F# d& V* Z%>
% ~$ F# q/ }$ L) I" garr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
/ k. ~4 W" K) {7 g+ ]% Z# S<%
. v  g- T# B; i$ Ttemp = temp + 1;
# [' R) z6 }4 u% y& ^}
, [6 S$ b1 M, U/ c3 t%>  s9 v; v" L% I: g3 K
temp=<%=temp%>;; B9 v5 s9 B/ g! C% D' r2 S, n& p" h. y5 N
function changelocation(id){
( t) r& ]# E1 k* r6 F& T  ldocument.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
$ d% l" J; B8 \var i = 0;   u( K  @+ {- y) n  v( ]
document.combo_box.city.options[0]=new option('-------',''); 1 U. v7 J$ \, G
for(i=0;i<temp;i++){
  [" H5 M8 j2 u% L9 O6 R2 mif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] ; N1 {9 C: Z. v% t$ ~: {
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
( k; ~7 q2 M; N! }( R}
% x% \6 T" |  r}
& `& {2 W* B6 H/ {8 n- y6 p* z}
; F7 x. ^* b9 j0 N/ u) O</script>/ [1 I8 ~2 F  S4 J7 F
7 q" h' J7 E/ I
<form name="combo_box">, G' T. a5 t4 I0 }
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">: J3 B1 p( I& C8 D
  <tr height="24">
2 n1 Z" [7 u) v  b9 {  v- H) Z    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
, I9 \4 Q+ H; ?& Q6 A1 Z  `' k    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td># D: ]' K- @, d- B: Y! ]
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>$ r. \/ u3 y, u. G4 e% H
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>  l. }+ N* _3 i: W; Z$ q6 K# q
  </tr>! j4 F1 M3 b9 r0 U# t
  <tr> , l( [; [3 l! J8 z
    <td>( A8 v9 e+ _) X7 `9 ~2 r  a( [1 V( ^
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">2 _" [; Y6 `6 k8 }/ h" ?( N! R
  <option value="0">请选择部门 ---></option>. T8 [6 f# I) z
<%
7 h( T) }. P$ X" M4 |9 ^    string sqld="select * from tdept";
, m9 a' i( I: y/ q9 F4 z- g% J7 Gstmt=conn.createstatement();- E0 D! h* W1 |  E
rs=stmt.executequery(sqld);/ ]. r3 j- y2 Y1 _  |3 k7 W# V
while(rs.next())" }- p: e9 |% J' [6 s9 A
{
% Z1 j$ ]$ N: [6 w7 f% N%>
* p, C' v/ A% N* r/ M: c  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>) l# C: }! H$ u1 @4 \5 G
<%0 f3 K, @; z0 k1 H8 D, c' P
}
: |/ x7 w5 v9 G1 s- W: u%> , }% X* `* C0 j3 r8 P- A3 u" o; Q5 b
  </select>
0 A8 e9 k8 \0 P5 L% ?3 [</td>% Z0 C0 Y& |+ p/ Z. k3 H
    <td>
- b% ], Y8 c# l6 j' Q8 S3 e& @0 v  <select multiple id=city style="width:150;height:200" class="bgc">+ K# u/ k8 v) F5 f% G1 r
  </select>
: ?3 u% E$ a* ]- i/ D" Z</td>
8 q* K% O( R  L" t- c2 k' H    <td nowrap align="center" class="bgc">
0 N4 ?& |$ I5 F3 Q) J  <input type="button"  value="<<" class="buttons">  p0 [5 @( o  q( V$ W
  <input type="button"  value=">>" class="buttons">  U1 a. F- r8 B9 Q6 J) `( y
</td>
- h9 |# n5 r6 F& O    <td>: m' i! W5 _" [* Q
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
2 `3 X4 j8 u2 g9 m. Z# l% C. [  </select>/ g+ x) Q  n. N" ~2 B# g/ h. l; ~
</td>
5 T1 r3 s/ i1 c. T) p! }2 @  </tr>
) R" e( v" ^: H1 B; J    <tr class="bgc">
- L5 W8 e9 Z, p: j' z) d; d    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>/ V3 d1 K, S' T- |
  </tr>; y3 r1 r0 e8 q$ {5 g
</table>
' }) c3 y$ B7 o( @* S</form>  O0 ]$ O; P+ B; z+ _) }8 R
<script language="javascript">, N5 [' Z& A: N5 z$ ?8 D: C
//人名移动
* ~$ G; a+ `9 D, I, I* N* E  nfunction move(fbox, tbox) {
# l- O8 ?7 h0 Uvar arrfbox = new array();& Z- Z+ c" B  I8 |6 _7 ]# x
var arrtbox = new array();! F+ V+ V! j( V0 h5 l% W
var arrlookup = new array();
. X- H7 `$ @% j" Y+ Evar i;  V, l9 S" H8 H( s% c, F- f
for (i = 0; i < tbox.options.length; i++) {
0 U3 q1 S( `. F4 d( Q. ^% rarrlookup[tbox.options.text] = tbox.options.value;
! \# n) o7 @& barrtbox = tbox.options.text;
2 t8 M$ L2 Z+ X/ I}
. v$ e0 d- k9 G4 u- g! S5 mvar flength = 0;
) }8 _& A: y# m1 rvar tlength = arrtbox.length;& n* e4 @  ?  k: T* n) T  V
for(i = 0; i < fbox.options.length; i++) {
8 k1 {4 ?% X. M8 jarrlookup[fbox.options.text] = fbox.options.value;
4 }3 n* q1 P  Y7 z" Eif (fbox.options.selected && fbox.options.value != "") {3 }4 R3 U  ]  O) H  M) M
arrtbox[tlength] = fbox.options.text;
# s$ h6 k) C2 gtlength++;) B/ b% p! d/ @) g9 r& J" M7 O' t) Y
}2 L" p; t, D2 Q! T7 @
else {
( X: ]" R6 w! a& }arrfbox[flength] = fbox.options.text;7 U3 l/ x- Y% W9 K* b# s" j3 b
flength++;0 t( h8 C5 S- j
   }- u$ {  O, d; |- x& G! v
}; j8 G4 a: d: c8 j% M2 p, n6 |
arrfbox.sort();
, l7 {! ^% M; t6 i; e! d+ Z6 harrtbox.sort();3 P9 C# `( k8 n

! X, O  B$ i' T, Ofbox.length = 0;8 p  D% O  y  ], X6 z
tbox.length = 0;
" v- u8 z/ ~4 }  O5 Dvar c;
9 V7 b1 _6 V; Q& Ufor(c = 0; c < arrfbox.length; c++) {
3 h7 [! H* |$ _: n% f7 F* |var no = new option();6 f9 H8 T5 d, \2 b. z9 i& I
no.value = arrlookup[arrfbox[c]];
8 _  m4 S5 m7 K" l* Wno.text = arrfbox[c];7 G/ B- Q! L# b' a5 e- ^
fbox[c] = no;0 A7 M" |, {# |+ O( Y
}
1 `8 z7 ?6 V- {! d8 o: Ifor(c = 0; c < arrtbox.length; c++) {3 ]0 {% c2 o/ L' ?* s/ I
var no = new option();; F. B  e) l, W
no.value = arrlookup[arrtbox[c]];# h3 v( O8 K" ?0 _
no.text = arrtbox[c];9 T$ L- Z" g) K
tbox[c] = no;) H: R# |: T" ?. T) K" s+ x) f, [
   }5 x: p/ O8 C" P; H9 k- x
}
+ T1 ?/ T% }  s+ g+ A% y3 P  X2 w</script>
; m1 H* J  u4 ?5 G4 g</body>5 m6 K- Q  G# ?





欢迎光临 捌玖网络工作室 (http://89w.org/) Powered by Discuz! 7.2