Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
, O! D, L+ t" f, H! L" O/ O, X         c pageencoding="gb2312"( X# l, |$ p0 P! z1 g# C
%>, M. H5 x! M0 t# g9 n1 _1 V+ B; N: Q
<style>
$ h2 J. B; x) ].f9{ font-size:9pt; }  z! _) C( S$ V) @" ?0 r
.bgc{ background-color:#aecaf9; color: #0033ff }
5 ^& z0 ^8 t2 i2 c/ M6 L$ h1 \8 @.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
4 [" @7 W2 O3 w* s" E  border-bottom: solid 1px #4e7dc1;
. n, A! o1 r6 ~  border-left: solid 1px #aecaf9;+ a3 b5 A  t0 m1 `8 ?
  border-right: solid 1px #5679bd;
7 x: s8 F, x% C3 H0 d  padding:1px;/ [+ `* u# a; _0 Q$ O) ]
  margin:0px;}6 h8 Y" x6 I0 k& @# ]4 C
</style>
( u4 i( z  k0 e/ u6 c; M<script language="javascript">
) h5 K/ h- ?1 ~  J# D<!--
/ [4 E6 ^6 {, \3 S; {, u  tfunction rv()8 V( E# k# u: B3 f9 C8 h
{
0 N3 O  y* p1 [4 ~! U2 K8 _4 {  var val="";
9 s4 o, M- Q$ D8 ^! u) x& V, F  for(i=0;i<combo_box.list2.length;i++){
1 r$ l, T9 t3 D  G$ O% g   val+=","+combo_box.list2.value;
! K; K% L6 q+ F4 k$ K, E( m  }
- P) w4 Y, Y' r7 ?0 d  Y: m  if(val.charat(0)==","){
4 u9 q1 x  B0 S- A+ g1 C" j# Y; z1 E   val=val.substr(1,val.length);8 \+ q* ]) Z1 H$ M! o% Z  _
  }
+ ^. X; q& W* Z7 z; B  opener.form1.frecname.value=val;  z) u) F  L7 J' D6 O$ B1 l3 H# I
  self.close();
# L3 T$ _- F2 v8 R9 q. ~}
: S- z% |' |( Q//-->
) r! W# b$ E- v8 a</script>
1 T& D' j5 C! t8 ^<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">3 N2 O  M* s4 l3 k. Y- I  C
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />7 {+ i# b9 \8 _4 d4 g, Y/ d2 d
<%5 `6 x+ @! @2 ~! O6 L
  cdatasource ds=new cdatasource();  //数据联结bean实例
: K. _2 L( j; _0 E1 i4 S4 o  java.sql.connection conn=ds.getconnection();
6 s% @1 l* Z% u- t% W1 @% U7 _  java.sql.statement stmt=null;0 z" o4 D2 ]/ N/ g) Z8 q
  java.sql.resultset rs=null;
* c0 L6 {4 @! i2 @7 H. E  cdatacheck dc=new cdatacheck();
, _9 @' k7 K  n! J3 Y%>  c6 {! e% b0 F9 y/ @; _
<%
5 k8 H! |. j4 E' D+ X; Tstring 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";
( W/ ^7 F7 O5 istmt=conn.createstatement();
. z+ |: p4 ^$ N+ `3 I' b# {3 U% mrs=stmt.executequery(sqlu);
9 X- W6 \2 N6 {+ ]- p%>$ r( u( f' s6 S; C- O( W
<script language='javascript'>
. U, N4 o' d7 l9 ]0 a/ S# K3 X$ Barr = new array();
& b7 \: S+ v8 |) o0 z<%  int temp=0;
9 M1 D7 e& W0 u3 F. @; i# v0 G' Wwhile(rs.next())
* c2 E1 @/ t' l. f/ A- ~/ c{+ K* ?% A3 g- ^- i! N/ F
%>" s3 h: b7 x5 J2 T
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");& z/ h( U3 }. U% o( k+ P' ^% K: [
<%( n+ n- {) s& F6 X
temp = temp + 1;: w( V3 N4 R, A0 x
}
) m! M, U: g& C% y6 _%>
  Z# r" R: W- @% r0 A* Ltemp=<%=temp%>;( {# Y/ Y" F# j) C8 Y2 F8 G
function changelocation(id){ 7 \  x! F/ j9 H# Q
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 : l  p# k& w7 p% g
var i = 0;
; v8 N5 D, e* d3 \! Z4 W1 Qdocument.combo_box.city.options[0]=new option('-------','');
$ i; _: z1 W: Tfor(i=0;i<temp;i++){
- e- a$ L  O/ J* A& Oif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] + J6 z5 s0 r) d+ B
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
0 P" |5 X: _! T9 W! M+ s+ j* Q+ x} 3 N( Q' |; I, j! F* e' \
}
# P6 g: ]0 E7 t0 }$ M3 Z  D  n} # a5 G) H0 i3 u" {- T; k
</script>* W1 H- P, t" @0 b) q
) v% k. W1 j- y) G. _; Y" \
<form name="combo_box">
1 b% x; O6 y  {/ f<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">: Z9 G: f" O3 p6 T/ R/ r
  <tr height="24">
6 S: x( B( ~" s1 f7 D4 s) P0 \    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
: }( k+ [7 P8 `8 I- k8 ^$ |. _    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>( }1 T. v) L- ~2 j) ~. `0 L
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
  y4 \8 q! a* T9 k! b    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>2 f3 x4 x8 o2 p6 J3 S4 W6 O" L/ v
  </tr>
9 I, \& d( W+ U9 {$ x  <tr> 3 S4 ?) g) [" P1 q- k) s1 l+ p
    <td>( O. u& B! N. `/ r$ p
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
! N1 c; W* y8 m; s/ }5 f  <option value="0">请选择部门 ---></option>7 j  V2 ~$ a. s1 L) }$ n
<%+ s6 Y* \8 D* T- N0 e: U7 g  ~
    string sqld="select * from tdept";
* m4 v- r, p+ \% J, sstmt=conn.createstatement();
( U9 z& g' f. k! xrs=stmt.executequery(sqld);( m$ ~1 l) Y8 }! i7 N, n8 z
while(rs.next())
. j$ F% Y8 i; m, |; w( C{
6 k' I4 |* x# M, w, n7 p! |6 G%>
* A+ L9 G4 w' n- W  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>* U6 W8 ?0 f/ M4 q. ^
<%
+ {1 W  [: I8 |, z6 y" v}
. [2 l, T2 Q' W  F' h, @! m, J%>
0 Z6 S* E3 N- \* ~  </select>) i) @8 r" ^/ I$ x/ p4 ?% T* j5 _
</td>4 \7 g9 l( y! o3 [- ]3 v
    <td>7 y% x, B) x- t2 h; E" ]$ j- F
  <select multiple id=city style="width:150;height:200" class="bgc">
, z4 T7 m) Z9 ~6 D7 S( a  </select>9 j1 U7 V$ C" A  I
</td>* u$ _1 n* y+ @: _( @" r6 [4 F/ L! [  l
    <td nowrap align="center" class="bgc">
2 ]5 J( {8 m  P  <input type="button"  value="<<" class="buttons">* s- h: ?" ^$ [7 x+ A5 g
  <input type="button"  value=">>" class="buttons">
# x$ v+ {3 X6 x  l: b2 a, L</td>
( r- ^; y+ s: [5 a    <td>
9 C' Q* ?: \) k1 p, h2 O! `  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">. m# |% s4 K" o! @: X
  </select>/ S( f# Q) C9 E' f
</td>
& R# U4 K( {& ]8 ?  </tr>
7 I$ ~  I- }, }8 v; K    <tr class="bgc">
4 z/ Y1 Y6 @$ P! W1 z' K. z! J    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>8 ~& j7 t8 w" a( d' s
  </tr>
% H0 N2 {3 n0 g9 p3 `0 G</table>! L' x" w! m$ v$ i/ P8 p. O' }5 ~
</form># E" z9 Z) @5 G8 i' m9 T% R4 m
<script language="javascript">4 p) T; G3 E) T6 @4 Y
//人名移动; e! ]% v9 F  B; [7 a6 I0 k
function move(fbox, tbox) {/ _) s# m- S  s
var arrfbox = new array();
$ v( q( ?0 g; h- v6 U: Z' T  r/ Zvar arrtbox = new array();8 z. F/ h8 O4 s9 B% ^
var arrlookup = new array();
0 L$ H+ }4 C- qvar i;
" t$ w+ H) k; |9 n. pfor (i = 0; i < tbox.options.length; i++) {) O; I; p/ }3 H5 `# l* R
arrlookup[tbox.options.text] = tbox.options.value;
) w# U3 w4 l' p6 Zarrtbox = tbox.options.text;
% }5 @6 x4 ~; b; I  i, `6 M! S}
% M6 V2 N5 z( V9 l5 w* bvar flength = 0;
. n! z/ u0 d3 w* r! ?var tlength = arrtbox.length;
6 k6 q5 ?) X( u5 c1 @  nfor(i = 0; i < fbox.options.length; i++) {/ t1 d& z5 l6 b- X7 {& T
arrlookup[fbox.options.text] = fbox.options.value;
/ m# w$ ]0 K; P! ~  ^6 c* `6 Tif (fbox.options.selected && fbox.options.value != "") {
0 D  ?" u  H  A1 Farrtbox[tlength] = fbox.options.text;. J: m6 m) `) v+ A: O- E
tlength++;- @/ `) J1 g* m: U. l! A4 x
}
4 h0 a( d) a  ]# celse {
; N; |. R$ s3 \6 oarrfbox[flength] = fbox.options.text;
, v  y8 r, x& @8 @6 pflength++;/ `3 t3 x5 w. V6 |$ C
   }( G' t9 B* y* r
}
: M$ W$ ~5 l  P; K- B, ]arrfbox.sort();. S; r" q; C  s1 t& t  i  R
arrtbox.sort();- _& Y! o, J9 P. Y* p, g

3 P1 v. K% D8 w4 u: nfbox.length = 0;8 o7 [8 |" @0 u2 J/ {4 B8 {
tbox.length = 0;
% m" l) o0 ?3 V+ s2 @0 bvar c;
' z9 f* t5 a1 i, t7 Xfor(c = 0; c < arrfbox.length; c++) {! }8 @5 g, R: w) B
var no = new option();( Z* y/ X* Z* H3 A( M
no.value = arrlookup[arrfbox[c]];
! {- K) z1 X/ g1 `3 L$ Dno.text = arrfbox[c];
: J$ p7 z8 b. S* R2 c9 P7 ofbox[c] = no;
# Q7 u+ I: L& J$ t% i}
" U& s: ?% |6 N+ D" {# |' |. B8 hfor(c = 0; c < arrtbox.length; c++) {
7 L. k/ n0 p* I' y/ z# Bvar no = new option();; a6 u! K; \- G* b# @9 U3 N" c
no.value = arrlookup[arrtbox[c]];
, y1 W0 z# H/ w+ fno.text = arrtbox[c];
0 A: a9 v- U& V$ `4 z$ atbox[c] = no;
' Q- v, E5 d' {* M   }
& O( z! d% @- b}
" O/ E: S$ @% w7 r</script>
$ ^0 M; D4 J0 A% L3 B</body>8 K5 ]# s$ k. @7 m! L: S+ U' p





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