Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"4 i& ~0 a( M; @3 `8 O6 T1 H9 ~
         c pageencoding="gb2312"
" s! E7 G0 H1 A) x1 G%>7 {9 E. H% L& e" [5 d
<style>
' M6 X- F# @6 |+ v9 a! h& h1 y.f9{ font-size:9pt; }, q$ \/ n4 N$ w2 L) F, e
.bgc{ background-color:#aecaf9; color: #0033ff }- G4 N" `8 [- a1 I0 c
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;" |% A# B' ^# W3 P
  border-bottom: solid 1px #4e7dc1;* a/ q/ j8 w# ?. g5 q$ `' d' l
  border-left: solid 1px #aecaf9;$ c: ?. v0 b3 s8 _) I2 b
  border-right: solid 1px #5679bd;( N0 `1 S* E$ q5 m' Q
  padding:1px;  R: `9 j' X2 J/ A2 ?4 Z4 u
  margin:0px;}6 i' A- G% U9 ?3 u3 b. M/ N1 M8 z
</style>
5 p% N+ x7 z" ], t' g0 d. I% @0 W<script language="javascript">
) J4 W. N* H" {0 v8 O<!--
# H* O1 {3 A- w; h3 W/ ofunction rv()
5 L5 x8 ], M. o' D. R{
; [5 r/ p) ~; B1 L  var val="";
& S6 z4 I- Q( S$ p  for(i=0;i<combo_box.list2.length;i++){
4 _, F: x9 F# V6 x5 C! g   val+=","+combo_box.list2.value;% Z7 s2 K" S, J  I/ F+ F* }4 ]4 d9 D
  }
7 t3 v3 k4 a* v, Q( W  if(val.charat(0)==","){
# j5 [( O: A" v* V1 D+ v- L# V4 w   val=val.substr(1,val.length);
- Y9 R' P1 |) o) K) [  }& z6 B% ?0 ]2 l4 V  S
  opener.form1.frecname.value=val;+ Z) |4 }* r/ ~- A! ~& J& F6 u
  self.close();* D2 k/ v' {+ i% y
}1 L4 y" [* d3 ~
//-->! M2 E  Z9 A( O+ C' W
</script>- p& @2 i4 }; }$ N3 o& J1 L
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">7 [, p$ M& \  a1 g1 g
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />$ Z9 w( E4 R  |0 N' @6 x( ]
<%
, h/ g- K" k# g  cdatasource ds=new cdatasource();  //数据联结bean实例
' ^+ Z) M/ P+ K& O- ^4 k  java.sql.connection conn=ds.getconnection();
6 ]) B( v. A7 w  java.sql.statement stmt=null;
( b: j. W8 h9 m7 [7 \- c! d  java.sql.resultset rs=null;
  [/ y9 c. \# q, ?/ G2 v  cdatacheck dc=new cdatacheck();# }! B+ {2 P1 a8 G
%>* ^2 @+ L4 l0 O/ U5 t! m
<%
8 P" e% V5 g2 ~! K' f2 F6 m$ Qstring 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";
+ g+ S, b( ]1 zstmt=conn.createstatement();
3 |* G' u  J* M4 _$ ~6 srs=stmt.executequery(sqlu);1 V6 O! I2 P% S$ ~9 C
%>
1 ?2 \2 D/ r; u0 n. `<script language='javascript'>
7 b) ~+ \& d0 j- ?, Marr = new array();( w: _0 Y8 q3 K' R1 N4 b5 w
<%  int temp=0;
. [/ Y2 ~: H. [, i0 k1 i4 vwhile(rs.next())7 p( M% b/ I7 F) T% _# {) |- W
{8 K8 F' V5 a. L8 B+ i' v
%>
% R  I% J. l, C; D) |. o; Y* @arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");, V! X( G( L. I3 X2 N
<%! \4 O7 y4 a" n1 m7 x, F
temp = temp + 1;; s; v( W2 Z8 p9 m0 C/ S
}  T0 W% x5 \, x) b
%>0 F& u9 }* w# n' O/ Z7 B
temp=<%=temp%>;7 T$ V4 Y! q/ E$ p3 H1 @) ~
function changelocation(id){
0 Y& b" L& h  }1 Q! R5 l8 bdocument.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
) I* A, d) w) I' x: Z9 f; \9 @1 O! vvar i = 0;
1 O0 F- c- s+ Odocument.combo_box.city.options[0]=new option('-------','');
8 v6 \6 N0 q. z1 a+ p7 S3 u1 ]for(i=0;i<temp;i++){
% z7 [4 C3 n# D; j3 E) `4 {9 `if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] . Y. |+ F! G3 u1 [& w
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
: Y" _9 I% i) \. G3 C7 d+ ~} 4 @$ H3 M0 s5 X; f
} $ c" K/ B& h+ Q- H
}   [& `. |& b$ C. ~
</script>
  J( G. _6 t6 ~! |4 }
% x; L3 S8 k5 K3 ?1 b8 ~  a<form name="combo_box">- D1 B# Q  q# Q& Q. ~
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
# `. |8 Y: X" b1 r0 n  <tr height="24">
1 B5 C) q/ C$ t9 p    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
  N! a( [: l) ^' P3 L8 t    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>' y: s7 I% {* v$ a
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
2 Y; }. o( b$ x( Q    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>) j8 w' Q. U2 p" M6 h2 ^' h( f
  </tr>% H$ Z7 a, |; |3 s; w: `' }9 I
  <tr>
; g8 F& l/ I1 ?1 c' b    <td>* ?+ a( c6 H9 g) v: r
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
4 M5 J* p' Q. x- ?* ^$ V1 {" K* F5 M  <option value="0">请选择部门 ---></option>
* R2 i# H# f) Y2 s( ~5 z. L<%) r7 Z' ~% P  k; d, Y7 U
    string sqld="select * from tdept";9 w& m' Y+ ?% Y/ p% R+ e5 r2 H, K; C
stmt=conn.createstatement();/ P" `, i8 B% r' ~0 x3 Y% l
rs=stmt.executequery(sqld);$ ?0 k% q! V% o& I3 y. [% s8 w" r
while(rs.next())
- H2 z: ?' \- {6 g6 e* W# H! Q( G{3 W/ F. W, Q) J: ?- ?9 B) m1 g
%>
8 t& h) f% d' F  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>" V1 e3 ^" S  T( U
<%
% `! X* [: b9 V! s+ d- l( x}
: L7 |  Q: o/ z) ~4 B5 g2 G%> 1 N& c1 Z& R9 i$ O; n' i- u
  </select>
5 D' ^3 s& x5 D# N% t</td>; x* L7 L' b/ M
    <td>. r& n" k' U4 ~  F* q
  <select multiple id=city style="width:150;height:200" class="bgc">: h. c" o7 U6 \- b
  </select>
- T3 |% S6 S2 f7 I. M; _. j+ u</td>1 ^8 X' Z( b: h: i( P2 ~1 ]7 T3 W# M0 O
    <td nowrap align="center" class="bgc">  y6 j8 {6 `- }+ o
  <input type="button"  value="<<" class="buttons">7 X9 ?% N+ R# J
  <input type="button"  value=">>" class="buttons">
/ j9 i) L; o1 o# u</td>
8 C, L1 S0 w9 X) G; M5 P    <td>
- _$ Q2 n( ^" M. K& h  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc"># q6 P8 v( n+ ]+ K2 O
  </select>
2 t' R# O2 q& Y</td>
3 Q. o+ U9 j, ~$ \" `" ?  </tr>8 k1 _/ P: W! g4 n
    <tr class="bgc">
  h' r% ]6 ?: y2 n, V2 T    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
7 A2 x+ H1 G8 b6 q* }  </tr>! p3 e7 p  v; e- F, s4 e
</table>
0 Y9 b. f- P$ D+ f! c' C, N5 h* r</form>7 k' Y7 d" b; V5 J) S2 t: h
<script language="javascript"># Z4 }$ `+ `& ?+ R9 |5 p0 T
//人名移动1 {! Y! m8 x6 N% \
function move(fbox, tbox) {
2 B, n- L. Q: b' p+ R5 hvar arrfbox = new array();
3 Y/ A. q+ H5 e, Bvar arrtbox = new array();
3 d. H8 Z3 o# _# Gvar arrlookup = new array();# l8 O( Z3 C  A3 L
var i;1 O, w$ |$ e# ], l  C" u
for (i = 0; i < tbox.options.length; i++) {
, `* y' @  j7 D8 Karrlookup[tbox.options.text] = tbox.options.value;1 z$ M/ `3 n0 |
arrtbox = tbox.options.text;$ B4 l: i6 O* U. h0 m  S  }6 H; ?
}
6 q: @$ H& D1 e7 yvar flength = 0;
0 M: w+ i# y0 ?: z/ u6 y  C) p) ivar tlength = arrtbox.length;
+ M* F! J7 }* G: u0 \/ [* Wfor(i = 0; i < fbox.options.length; i++) {. Y! {- ~. T2 U1 o
arrlookup[fbox.options.text] = fbox.options.value;8 e$ u  f& i% P
if (fbox.options.selected && fbox.options.value != "") {# L+ s6 S: o6 K& Z* [7 _
arrtbox[tlength] = fbox.options.text;. H3 Q5 t5 g# S; J* n- H" z
tlength++;
% h- o% c* N9 ?( K' g% v7 s}3 B: \7 e! |% \* D
else {
, N  x+ Z) Z, F2 L6 M6 tarrfbox[flength] = fbox.options.text;
- {! _8 ~. [' K, Hflength++;+ \  N% A" N" R6 @4 R1 q5 m2 t: H( J
   }
6 }% D" t: Y. A; V}, c. ?1 f' V+ D
arrfbox.sort();
1 _# Y! W3 m. Z2 E' a2 }arrtbox.sort();
$ J, B! f$ ~1 @% U% v- K
. D4 Y) X( J* B( M7 O$ g2 g+ zfbox.length = 0;: n% P" I5 V+ T* O$ `" G0 k
tbox.length = 0;- w8 u- a& L& I
var c;' D, b. A% P/ z8 z
for(c = 0; c < arrfbox.length; c++) {
# u! K8 _( R* g) X* ?6 q* gvar no = new option();- \1 D. X% L: g" S' L* L
no.value = arrlookup[arrfbox[c]];, L5 z4 A! ?! X# D* j
no.text = arrfbox[c];+ }$ o6 D3 |3 d9 f
fbox[c] = no;) q$ N# N/ o" K9 T# _0 C" A
}
1 }, g$ U* \) V( J6 g- pfor(c = 0; c < arrtbox.length; c++) {( q6 X) m( }+ k, W
var no = new option();
+ a+ ~2 r$ }% J. [& ino.value = arrlookup[arrtbox[c]];
" x9 z0 o3 X3 ]. v! ?( Wno.text = arrtbox[c];
  Z- Q8 k) E2 c5 d0 ]' Vtbox[c] = no;
* d3 Y3 p6 A" r/ A$ l7 H9 E1 [   }
4 o0 I0 T4 b, b}( P: g/ L- X) D- m* I8 E3 ~' m) h
</script># p) I$ ]/ m0 I$ z+ j+ L/ d* d
</body>
" ?0 Z9 |- m! |1 C; s, d+ Z) l





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