Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
% W# Z, S8 {9 `5 Y* g1 a         c pageencoding="gb2312"  ?& u  D' @% `
%>; s# j/ x, ?7 W  A' V' |2 I& \$ o
<style>6 S0 x1 G. h3 I" \3 @
.f9{ font-size:9pt; }
$ h& x4 h* q7 m$ }8 E1 _.bgc{ background-color:#aecaf9; color: #0033ff }" L3 z7 a( X) v. F5 v  r
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;. F) b; ?. N) T1 Y# b2 ]9 |' h
  border-bottom: solid 1px #4e7dc1;  t; ]9 ?( d$ Q% g$ c# D: |. @
  border-left: solid 1px #aecaf9;
' s2 Y& g. ^; o4 I  border-right: solid 1px #5679bd;( W2 F/ h# T) M2 V% O3 ]3 k
  padding:1px;# b2 R3 `, \3 x8 q& }* j
  margin:0px;}# u. ^5 V1 O2 d8 i& n3 Y& h- n1 Q
</style>
# D% v, i: Y5 ?( h<script language="javascript">
' V! r! [2 d8 T/ D2 a' O' k<!--, ]! m6 g+ D; d8 o
function rv()' O8 y3 J2 F" V0 v- F& `1 `
{/ }" j3 q: c+ x9 ^* N- _
  var val="";
) n. ~6 o" T! L& H, I8 c4 |3 }  for(i=0;i<combo_box.list2.length;i++){' i( T' K: }% ?+ v8 X( u) y1 ?- Q
   val+=","+combo_box.list2.value;
% S5 {+ H  s( u' i- b  }& b2 `9 P, E7 t7 J
  if(val.charat(0)==","){
+ S4 f& m3 @1 U7 Z1 B( K4 U   val=val.substr(1,val.length);- F* v$ b% G9 R; }6 ~
  }. J6 V1 L, N! P9 e8 m" V" g5 M, c: E
  opener.form1.frecname.value=val;
$ I# l4 {. ^$ v  self.close();( m" h6 e5 y- T& S! Z- B) h
}
# R+ M4 [% {& U0 _! {//-->  S8 u/ G& f8 E" c0 ], S4 f
</script>1 f  e, ]1 p, M: k8 Z* i. h
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">- k4 Y, n$ S, s: J5 Y
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
" Y6 Y/ d) u( N4 O4 g! p! h* y<%  Z" p) A2 K7 B, H! W
  cdatasource ds=new cdatasource();  //数据联结bean实例
  v3 h% D5 i* _" v* g  java.sql.connection conn=ds.getconnection();
& h1 ]# G  Q, _3 |! Y0 v4 i# E  java.sql.statement stmt=null;
2 x- c9 a, I5 U: S/ F  java.sql.resultset rs=null;
2 g( @# l1 z5 x8 T1 k  cdatacheck dc=new cdatacheck();
$ h0 o8 a0 J" K& v4 A( e" M* G%>
. A2 e* G8 a9 v' \$ ]$ Y<%
2 v3 D4 e( o2 U* I& Lstring 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";
/ _1 ^3 h8 A3 w9 `: rstmt=conn.createstatement();
" ^; b9 t8 J+ L1 L8 Srs=stmt.executequery(sqlu);3 o7 Q* u5 R; C5 {5 N
%>) @  {  g7 _+ t# }& Q4 s! b' i: u: [
<script language='javascript'>
  ^- N5 M% a9 H% P9 U% N2 z  iarr = new array();
/ G* C+ @' e0 h9 W( o0 k<%  int temp=0;6 K" b1 e- k0 E
while(rs.next())
4 y: G) y7 e% c1 h" b% M{* r3 d5 q9 C) T8 }  t
%>  ]1 |0 W; f% o1 X& Y  B
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
: \! B0 R8 x2 l+ O8 Z<%
4 E$ L7 z% M2 T6 A% ^( V& m4 dtemp = temp + 1;
8 P& \, U  A- x5 C}
) M! O% @0 p( Q& P3 d%>
9 M4 `0 i# r: s6 x4 c  ltemp=<%=temp%>;
& u) ?. e' s  g# `, u( {$ Yfunction changelocation(id){
0 o) @8 n! x1 \document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
- x3 l8 d8 c* _' H& E& S2 Rvar i = 0; ' ?0 L+ k# m3 E5 G  ^& }
document.combo_box.city.options[0]=new option('-------',''); 8 R% W3 b  L3 t8 `: k
for(i=0;i<temp;i++){ . i+ }0 V# z4 ?; V# I- ]4 Q" q
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
; H) y9 {1 I/ ~( M' k5 mdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); & x9 g' @9 Y5 i& l1 B: v
} 8 k& a6 N  d& I) t9 b9 r, I; q
} $ G: t1 n1 p9 j3 j) a. p% `; k
} ) Z7 i% z% J% p( c, @) Z
</script># _, c, @2 o3 y+ \

6 H+ \2 ^! O! [& a. I8 f% x  g/ f<form name="combo_box">6 I1 p+ O3 Z& a8 N: o- e9 }
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
6 r. `" L& d9 B2 Y) p0 O  <tr height="24">
, J4 p+ f1 z3 @8 @; q& @    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>: Q) y. p3 d+ C. \) u, |' _' V9 }7 x# X
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>8 T/ T$ r" o" ]" k4 Y6 m0 {, q& A
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td># _  H/ g3 v2 b9 k- }
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>6 |3 C' `0 N( `+ X7 a/ _
  </tr>& M8 J; k6 t/ v2 Y% s6 Q  n
  <tr>
  H: ~0 u* `' y/ i' @1 Q3 g    <td>+ Y9 w% K% a$ ^3 i$ N  i
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">" {: t1 @! l% D! K7 D3 X+ _+ b1 p- s
  <option value="0">请选择部门 ---></option>
$ ^$ l6 N  \5 d4 e. |) I4 u<%
& T, T) J  A: Y5 T# }1 H    string sqld="select * from tdept";- U3 ~1 X" p) Y' J; h. E7 q( r  B( k
stmt=conn.createstatement();
; p2 b4 p3 Y5 z- H" Z7 u0 H2 c8 A+ l8 Grs=stmt.executequery(sqld);
$ V5 f6 |8 E2 u# M. B9 s7 Rwhile(rs.next()): X8 b; r: C' r  P
{- b" p* x/ Z9 L3 }, T" ^: M
%>
; H' W5 d8 `8 h* l! l9 ~  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>; u1 h) z: }% x/ `* x$ z5 [
<%
, Z4 y! I( @  m# G}! h' l* e# k& ~" Y
%>
3 |! x( f/ {3 q8 r" [. m6 l  </select>, r! F2 i  M' P
</td>& ?8 {) g1 z  T: Y2 V( |' k( ?/ r
    <td>
+ G2 L$ n2 y% `) w5 f- x  <select multiple id=city style="width:150;height:200" class="bgc">
/ L" M+ o  ]( Q6 U! l: U  </select>
7 W' C0 W2 s7 w: e' O& {</td>. p6 {$ O: T- S1 K0 T6 t0 v/ B; M
    <td nowrap align="center" class="bgc">6 @9 J; c/ P5 P; j7 M) O
  <input type="button"  value="<<" class="buttons">
( b$ I# t3 s! v2 U5 |; p$ r/ S- |  <input type="button"  value=">>" class="buttons">
# U, m# z) m4 T8 |</td>3 h$ y, p2 z3 p: f! o) u4 j* V
    <td>
! P. x9 @& D- D1 |! o' k. P  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">/ w( |- h2 z6 \$ _4 j& Q/ B8 ]1 R4 J
  </select>! ~' c- q# u8 q2 d
</td>! `. j2 |! _; q2 s- I
  </tr>
# g! U* p; a* N3 B( ~# }; q. }    <tr class="bgc">
3 q4 y* X$ w% Y7 `: W6 C* E- }/ Q" m    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>8 Z. ~# F9 }( U. m7 ]9 E
  </tr>
- k; _9 t' H: Z( _7 q& H" h$ S</table>+ E& i: h% J5 z+ W, i- u
</form>; _* s9 R/ z! M. ?8 q" p) x
<script language="javascript">+ X7 L" }2 B1 {# M
//人名移动! s4 s6 X0 I& F: `8 [
function move(fbox, tbox) {
7 {3 @' v; Z# Z& T5 v+ q. S! cvar arrfbox = new array();
4 q9 y. s. K9 }. s2 cvar arrtbox = new array();
/ ~# ]4 L' [# d4 Gvar arrlookup = new array();
5 g% [6 }  _" Y: }/ O$ a( y( Fvar i;
; T" Z4 B' M0 e. q- N+ X) A) Kfor (i = 0; i < tbox.options.length; i++) {
/ `6 M# ?" S; n1 f1 h# Yarrlookup[tbox.options.text] = tbox.options.value;, \" H, v* H0 P- W+ A) I
arrtbox = tbox.options.text;
5 B! F. g# U2 d5 E  ~: P$ w}
0 u' I* C; Z- O* z" Hvar flength = 0;
( M, j* z5 d6 T& c; V( D( G  z4 \var tlength = arrtbox.length;
4 o- y% J. [/ F/ `1 Mfor(i = 0; i < fbox.options.length; i++) {/ i& c6 m3 y' J9 w% C
arrlookup[fbox.options.text] = fbox.options.value;
' ^8 q1 y- S- f& f7 C! Kif (fbox.options.selected && fbox.options.value != "") {- ?9 r. F0 R0 l; W$ J6 F
arrtbox[tlength] = fbox.options.text;4 N8 W1 c- t4 K- y- @- T
tlength++;0 f% T" S# H  }4 \8 Y) m
}
+ i3 j' q  L; {( }else {3 Q, U- }. t! {8 N, G$ f2 q
arrfbox[flength] = fbox.options.text;  w; H; e4 d; D, r- U( v' y
flength++;; M& J; X- `+ ]$ N! R# d
   }
* R/ m2 H5 F$ @}: e- O5 f1 [" E) \' o
arrfbox.sort();
' e* n$ g3 r! X5 p4 ?arrtbox.sort();
4 r- h, m9 N" }6 W- K3 D+ x) h. ?7 V* H& M6 w& Y2 x
fbox.length = 0;
/ B- ]7 w! q, K; d! L3 R5 X# Q; Stbox.length = 0;
. E, c3 {- K0 e" @7 ovar c;
% H/ w' l7 L  p/ J1 m% r- Q8 W9 mfor(c = 0; c < arrfbox.length; c++) {4 I/ z/ Q% Z2 `9 a
var no = new option();4 K! m; r' _7 I# ^! a) R
no.value = arrlookup[arrfbox[c]];
0 p; V3 K5 `6 r* ~3 \& t" @8 tno.text = arrfbox[c];
+ ?7 o1 k! D/ ~# yfbox[c] = no;
6 C1 c3 J, d" I- ?+ J. w}8 D6 m/ g3 |5 n* T9 q
for(c = 0; c < arrtbox.length; c++) {
( l7 v. c) W  h( j( N# H, Ivar no = new option();/ x$ N' ?! i* e& E! \
no.value = arrlookup[arrtbox[c]];/ F: J5 e( f. M4 m! a- Q
no.text = arrtbox[c];
, O; a8 _- j8 a5 ^0 utbox[c] = no;
) A" ?! W9 }6 s  |# Z8 q! X6 a5 Y   }  B, i0 l( L1 D" o
}5 n4 H5 b; ~  ^+ U1 {6 U: a& A
</script>" l- q9 O( m3 i$ \
</body>; _5 _$ x1 j1 x7 ~: X; N





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