Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
4 `4 m6 M) n& f; G3 ]         c pageencoding="gb2312"
/ E0 `# M/ Y% `; P# H%>2 _; \$ L; w, d1 Y# r2 e
<style>
# Y; M8 B' ^9 V( I3 z/ M9 F.f9{ font-size:9pt; }7 Q0 Q  Y( U- ?6 f/ Z5 ~' O
.bgc{ background-color:#aecaf9; color: #0033ff }" z0 C. Y% V; [+ y! n
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
( [) t; S& \/ E# x; ?7 A/ j' V  border-bottom: solid 1px #4e7dc1;' G/ ^. b! A# ?+ T% ]8 S
  border-left: solid 1px #aecaf9;" [" b3 W" s5 G: W! Q: t$ r7 K; W
  border-right: solid 1px #5679bd;* J9 M; R: d4 i8 \7 F! {$ |# q0 f
  padding:1px;: D/ M5 }4 b! [( J$ D4 u
  margin:0px;}( ^. b. S- E) C1 B
</style>
* L$ E" u, x$ {- {% }3 t<script language="javascript">- X3 i1 u3 n) X
<!--
4 N! `3 E: t7 }: {6 K7 g4 Jfunction rv()
0 Q4 ?5 N2 `0 \; M{
: T& q  e% F" [/ l9 g7 N  var val="";3 d1 L  e7 {' w/ n( p) p. f
  for(i=0;i<combo_box.list2.length;i++){
' Z1 N6 Q$ E/ z& H; b+ z   val+=","+combo_box.list2.value;
& v+ I4 y6 d7 g. x6 R& j  }1 {) K" T% S% s2 k8 P1 O
  if(val.charat(0)==","){# I: i9 _( p) O( X
   val=val.substr(1,val.length);9 a9 A3 D  G. Q0 V* S+ z
  }' E& ~1 S0 ?4 V- q8 e8 T( J* D
  opener.form1.frecname.value=val;
* z$ [1 G( `$ e  self.close();
5 }; p9 D( n! M, O! Q9 t9 o}' d  c9 X) \. T$ @, n5 X7 s9 R
//-->' Z. @+ {6 K  H: g6 h! ?2 V, _; l
</script>
% f/ C0 z4 c4 ]$ g<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">$ t) h6 w. L: u' J
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
# E# _4 E+ \9 s7 h3 B+ K  p<%8 E7 I9 S% T) {1 s+ I9 Z+ Q( H! l
  cdatasource ds=new cdatasource();  //数据联结bean实例  J" v. \5 @1 C0 f1 A! o& h
  java.sql.connection conn=ds.getconnection();" h; @) y3 f: Y1 b
  java.sql.statement stmt=null;
$ Q# h6 ^  P  t) M- i6 s  java.sql.resultset rs=null;, w1 g" e4 U+ ]. }5 e% [
  cdatacheck dc=new cdatacheck();
; ~# k' O. L9 b3 \" U. e7 d0 [4 G%>0 M" N# }. y5 V3 y8 E4 P( V& [, C
<%! z4 U% D6 @! g
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";
# |# F4 S( }# @& E- h6 R$ tstmt=conn.createstatement();
! [- `* `8 {) R& C6 G$ E# ars=stmt.executequery(sqlu);
3 \. t" l6 h2 u. O" p3 f%>
7 z' Q! Z/ [5 N/ {& ?+ D- P' c<script language='javascript'>
! z# z, X& Z+ ]; Y% W- G, xarr = new array();9 G2 k6 D7 s' D" n% i) P$ ?# Q5 r( O
<%  int temp=0;$ O; w6 Q4 J" f6 D8 B
while(rs.next())
* [" l8 p8 k1 @& C0 }! x& w{
7 b7 t9 R6 X/ R8 u+ a4 v# Y0 _& Y* Z* w%>. L; Y* A: ^" ~
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
  q8 b% Y; a" ^) U6 S<%
8 v8 Y; d* q  @% e& G) ytemp = temp + 1;
# }+ J2 T) k2 E0 k; l# ^! @6 j}- e% N$ O% p* c
%>/ Z6 q9 e8 ]0 j$ {7 q8 m' V$ b" z9 G
temp=<%=temp%>;
3 x2 a. a5 q- E2 v( d8 b( j+ j7 [function changelocation(id){
6 Z  N; g! Y  _# V  w& r2 Q( C3 adocument.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 + g3 Z( ^# f# {
var i = 0; , v' j# k& O" A$ ~5 @0 A: J
document.combo_box.city.options[0]=new option('-------','');
/ V# o# Z0 L* l& Z# mfor(i=0;i<temp;i++){
3 X; T- J" {$ k/ g% Aif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
  ~  k  E3 U4 b; M6 a" adocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
" C% `( j" i9 y$ r) L}
) v9 p1 U& d9 K8 u6 A5 X+ o2 h$ k}
0 i, n( H7 I2 T6 M! o9 K1 E} / t9 F% K$ Z- s9 w
</script>
' |3 X" B. R, X% y6 ?+ B6 Y. h9 {
# ]/ W* Z0 r' n, ?3 n$ t$ {8 x<form name="combo_box">$ V5 j9 |+ v1 e0 ?. s& V& l
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">& y+ `5 j# C4 R) b2 V+ M, {
  <tr height="24">
- h9 o" J; ^7 R    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
0 I+ Z5 m. G$ A    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
; C! j$ |7 M9 v* p  ?2 T  y    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
0 G% o  B% o0 d' `3 [% v; N) p    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
- P! f. O3 F5 I2 D! O* Z% J9 T  </tr>' `, @, W2 h9 l, g2 h( I$ O
  <tr> ; ?' ?( I! z+ F) q* h
    <td>2 U6 J  b# k9 u. p- T
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">$ X+ o5 E0 ]& W) L- d. s
  <option value="0">请选择部门 ---></option>- t; {  D3 @* ]' b7 q& \1 J, B! a, g
<%- }# L7 D, A" X2 t; L- }2 y
    string sqld="select * from tdept";
! t; \7 t! j- U0 o5 Cstmt=conn.createstatement();
' v  X2 }3 Q% u# Irs=stmt.executequery(sqld);
5 A7 K4 {5 G. b% ?0 Q6 Rwhile(rs.next())! u! o" I5 ?# q/ R0 h& Q
{
0 a- w* d+ ]/ R%>
6 U. b! b) G/ Z4 e4 s% z  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
$ _+ D3 o# T6 [6 d! F- c<%4 f0 f4 H0 `' q6 b* P8 Q3 J% }% ~
}9 Q( f5 X. e+ S- o4 b, t% G
%>
+ U; b3 J3 \' t* x2 D8 f2 e( o* m  </select>7 j$ m6 g% t3 d+ }  t8 @
</td>
7 |/ ^- Y2 S0 O7 C    <td>+ f7 Y6 v. _) ]
  <select multiple id=city style="width:150;height:200" class="bgc">- ^! E+ T8 z/ p' Y' W2 ^
  </select>5 z0 [: B1 \1 ?
</td>3 A8 t0 h5 t' O; i4 o7 o
    <td nowrap align="center" class="bgc">
* p2 B8 W# [; g$ `/ g6 C# n  <input type="button"  value="<<" class="buttons">" C, a2 A, U$ R1 u4 [
  <input type="button"  value=">>" class="buttons">3 D* w% C, A- {* b% v. ?  W; ?
</td>
' P4 n8 b+ @: L, _% U0 x' y    <td>% w( @8 J1 O7 f4 Z# z' K  P/ }
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
$ C$ v! R  i- x" b  </select>
9 d/ [5 ^) ]/ K! F+ h# g</td>
% q. G! `: J5 b0 c# E, R4 k1 d, o6 p: s  </tr>/ ^) p8 B( t7 R& {6 `
    <tr class="bgc">
: x- f7 ^/ d* |8 i    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
0 n4 x: [, m7 ?% \/ G' Y  </tr>
5 V/ B  i$ \4 D: v/ O</table>  V" k2 F/ e7 {! l. U6 P2 ~  `
</form>/ s5 K8 A/ G+ M, M5 R- v
<script language="javascript">) n0 k7 U. q% |$ S, \
//人名移动
5 Q7 x6 U2 H) N, U; T% g5 |) pfunction move(fbox, tbox) {% t6 [' O( L! g3 T9 w. B( o0 u3 e
var arrfbox = new array();
- j* x9 ?6 K3 d7 O9 \4 h# Kvar arrtbox = new array();' C" e% Z, j# _
var arrlookup = new array();
! y* }) l6 C6 M+ ^: E( o6 }var i;
2 J5 k3 v* ^0 W; Cfor (i = 0; i < tbox.options.length; i++) {
# W2 ?  e5 m" y+ g% e" [arrlookup[tbox.options.text] = tbox.options.value;+ E6 i9 V* {, F
arrtbox = tbox.options.text;
8 ~- t. h& H  r4 n7 S; ]" o}. b+ B5 ^0 _3 |9 Z% R# p
var flength = 0;, |7 R) `  O; T
var tlength = arrtbox.length;/ L) j' P& @2 K- T% }/ r
for(i = 0; i < fbox.options.length; i++) {
  S2 ~7 d, r. j7 jarrlookup[fbox.options.text] = fbox.options.value;4 v. A, e: R5 T2 G! F
if (fbox.options.selected && fbox.options.value != "") {
# j, Y3 c9 J& i5 z6 Qarrtbox[tlength] = fbox.options.text;
! o7 x& k' L1 b* i& c2 J" p; s$ rtlength++;7 x2 D$ M* E" |, r
}! [/ i6 K# G4 A4 g7 p
else {
1 r% d" {) N7 A1 [9 ~arrfbox[flength] = fbox.options.text;0 v8 ]; u- x& ?2 t( t) n. u0 r( Q
flength++;
) `, h6 U. n; O/ K   }$ p- t. Q* n: [6 O4 d8 z2 Z
}
" P1 d' f2 i. T' }arrfbox.sort();  Y6 n$ }/ g5 ?/ s) }& Z3 o
arrtbox.sort();
% e0 X+ ?5 H' T# e1 \' g& m; x$ m7 B, W! v) c& K
fbox.length = 0;( D; d7 G3 K! B, `. [
tbox.length = 0;: |( W4 D1 H! d, x' c$ J
var c;# x4 ~" }$ `: T. z" Z: ?$ z
for(c = 0; c < arrfbox.length; c++) {! e4 x' e9 y; K. q! t# m- @
var no = new option();7 |4 t5 ^/ r' @7 E2 M( ^  R: Q8 G
no.value = arrlookup[arrfbox[c]];9 U0 P; c5 i5 A- z: h9 s
no.text = arrfbox[c];
0 @/ M. B6 }6 M: q! ]fbox[c] = no;6 W( K; f% @, ^& z( V
}- Y7 Q0 u3 m( _; P
for(c = 0; c < arrtbox.length; c++) {
' J" y! C( x0 A7 J1 P( A. ivar no = new option();
: V) _  _! h+ j* k1 y/ mno.value = arrlookup[arrtbox[c]];6 Q+ `2 ^0 t' U5 d5 [) ]  {
no.text = arrtbox[c];% ^' g* A1 ^- C  o6 z. Y% J% ?. m0 L
tbox[c] = no;
3 O; |0 I, F% n  s   }
7 G* d% I" m  |* P}& x" d% q' e7 N/ g3 Y, ]2 R: e9 A) k$ u
</script>) C# `' K7 G3 l4 r6 n3 o
</body>8 t$ k( I* B- Q  s1 w( I% n9 E9 R





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