Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"$ Z8 |/ x0 ]" i+ b7 a  m. [
         c pageencoding="gb2312"
9 h/ X( q' h' v% q/ H%>7 I8 o+ F0 X  @& ]8 u9 @
<style>! J  {3 u. u/ v4 e! K) r/ t' M
.f9{ font-size:9pt; }8 E+ i9 o; E* R" e/ f  M
.bgc{ background-color:#aecaf9; color: #0033ff }
8 \7 x1 z9 O3 y- }.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
0 E) p4 c1 ]7 n( x: \' ]  border-bottom: solid 1px #4e7dc1;
' Q- h- s" R  H+ D  border-left: solid 1px #aecaf9;" s) L2 ?7 [! T5 K
  border-right: solid 1px #5679bd;! \9 h+ {$ K6 }( S; p' b& P1 J
  padding:1px;
3 ?9 y8 h2 o) Q' U) s& _  margin:0px;}2 R2 g( r$ X. G' _; s
</style>
$ d) l$ m  h6 d" M2 Z<script language="javascript">
# M2 B7 c4 }& Z- O: O% }6 \<!--
6 X2 g& ?2 x$ }( v% t: p( Ifunction rv()( n2 N; i( q0 n+ @
{+ x; u, I7 ^  p' @# N6 V
  var val="";
6 j  H# h* \. x$ c6 [& o  \  for(i=0;i<combo_box.list2.length;i++){) b, D4 [9 F0 h( I
   val+=","+combo_box.list2.value;
% s: N8 O" h' @( e. ]  }. \/ |7 C. T4 `) k
  if(val.charat(0)==","){
, q* P+ `5 A+ d' a  r) M' z   val=val.substr(1,val.length);
8 r- R) K- u- G% U9 [  }1 d' \  l) t8 \! l$ P
  opener.form1.frecname.value=val;
7 h$ x! I  ]( n/ i8 {/ W: S0 o8 ~  self.close();
3 ~, q# N) o" n2 _0 ~; ]6 c9 Z; k}
; V& Z5 I  C) g) H) v; J//-->) z) ^  g) U7 u
</script>
; @2 b( C6 t. o& K2 k: ]<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">* S- W/ d* M) Z1 U9 |% A3 H  o
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
! j( A% T+ p! s) Z" W9 s5 [, V' F& O<%
) n) f8 Y8 ~$ v4 J: ]  cdatasource ds=new cdatasource();  //数据联结bean实例
( R0 d- S2 n3 [1 @, z$ F  java.sql.connection conn=ds.getconnection();
- {9 c8 W' p( ~  java.sql.statement stmt=null;! _+ \4 u: J- {; x
  java.sql.resultset rs=null;
3 a1 I: e( x! \+ V$ [  cdatacheck dc=new cdatacheck();
7 v6 X  [5 K+ v2 d%>
1 Y; b7 P5 U5 T) u2 z% @6 D4 @<%. t3 l5 ~9 Z& I1 Z/ [  z9 D
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";
3 h& F6 t, j! \2 bstmt=conn.createstatement();
- J% r, R/ O9 m0 G6 `rs=stmt.executequery(sqlu);
* N2 }, \& z6 h4 p7 ?+ d%>6 Y+ f. k9 A# m0 n5 B
<script language='javascript'>4 i8 o, l7 X- |! u+ A1 O7 {: j
arr = new array();
- p& K  h4 K1 a8 d( P2 j* n- V<%  int temp=0;
% o; n7 ^; k' Y5 Iwhile(rs.next())$ G$ K4 S$ q3 I9 R0 h- O' `% n6 Z" n
{
9 T( M' V4 o$ T" Q. j& @5 e$ c. E%>5 p) S/ h# P' J
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");# m& y: l( \7 i; u
<%
/ l" Z8 _$ ]9 x3 T9 c% W8 Atemp = temp + 1;
5 g4 H  q2 ~# S0 G% T! x- K& \}, |- v4 R* ^# J  e9 y2 T
%>7 K* x8 z6 L4 t
temp=<%=temp%>;
) e! V- @* W2 D4 Lfunction changelocation(id){ 8 b) r& a: l% Q$ c1 o- z
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
) R2 `1 A" l  `6 y3 U0 @var i = 0; 3 R/ Z# d' N3 L8 I  P1 z
document.combo_box.city.options[0]=new option('-------','');
" {  a' j: D  M7 N' M/ Lfor(i=0;i<temp;i++){ ; k9 ?) A. A- {- C
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]   h- {5 v! |7 U- i; r
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
4 ~( M  q: j6 s' [9 M}
; t  f1 e7 P: X' Z3 {! e. z} 6 y5 Y* Q* f' _' d) n: S
} : t) H6 @8 \; t# t
</script>
/ T: O) s2 s# p+ h" V- L+ Z9 j
( X& B  P* |& E9 ^6 U& _<form name="combo_box">1 U: C7 t# {0 g9 s" G* X" r
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">6 s3 d% L+ G) d! @  y1 _2 T8 c0 p3 q
  <tr height="24">4 p; W7 ^1 V, d5 q  N2 q
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
# ^; g) K' r0 |7 \1 U    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>+ J8 i) g- p) I& @! R9 W- P
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
' b" R) P, s$ B5 w/ h  \/ J    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>3 u6 h  r& v9 k, q: a) A
  </tr>
) @7 j1 y/ C, A  <tr> / X- \# }& G% p5 r. R! N4 Q' J
    <td>
) Y. r0 m$ j" ^9 ]& A* ~) w2 t" t7 \  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">* p6 Q. \$ r( U5 t
  <option value="0">请选择部门 ---></option>  _* n8 w0 |. ^# Z
<%8 S. s. p% U+ E9 l" ?( |) t
    string sqld="select * from tdept";: f' r0 [$ K9 s: s/ M$ w* g' G1 M
stmt=conn.createstatement();2 O" d& R  j: W+ d/ R6 \% t
rs=stmt.executequery(sqld);8 l: v2 a5 A+ q7 e  c
while(rs.next())4 g6 U' A8 e" L
{
# r% E6 q3 k0 `%>6 ^, B* ^' t, e, S
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
; r+ ~' @: Y1 L; V% |/ `0 t& X* T4 P<%
7 q* U7 C6 f( q2 N}" l* h( q. R. h
%>
+ b, U, r* G. R  </select>1 V. U$ l7 j2 p, G2 m0 Q( N9 W
</td>
# `3 ^# w& Y1 d& F: n9 L3 a    <td>
, ]: u& U  z6 X9 B5 A  <select multiple id=city style="width:150;height:200" class="bgc">
+ E* I$ X. z4 ^( |, _* F: w' F  </select>
: G' y8 Q5 u2 J6 t3 u0 i</td>
1 c8 X9 q7 B3 v% K    <td nowrap align="center" class="bgc">
9 M* ~$ Q0 S- I$ s2 G  b  <input type="button"  value="<<" class="buttons">$ B' _2 Z  a6 T7 H
  <input type="button"  value=">>" class="buttons">
* X1 `- E) o2 j+ E% j& ~</td>
4 |' J0 L7 {& M& V! x6 W6 B( y    <td>4 T0 Z% u& J4 w2 y! T. c& h
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
7 K, y3 F) q8 ~" h  </select># b* N' T7 ~8 u0 ~- O) A0 y& Y2 k
</td>
% z( f% h" J7 V  </tr>/ B, a  I1 i$ l) F
    <tr class="bgc"> % S2 W5 H; F* h; r
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>, b9 b: ^+ m4 o+ s
  </tr>+ J' R7 Q$ \% z' z0 k
</table>
; o9 a9 S& Z: V& S</form>/ l8 _% s: O4 l; W9 h" B% M
<script language="javascript">
6 v3 H- _/ W8 s3 T0 W+ N//人名移动2 G* H! y0 _! W; f; R- j
function move(fbox, tbox) {
0 Y( i& @  Z. t# V- w6 fvar arrfbox = new array();+ S' m* L4 L7 z& _3 e  |
var arrtbox = new array();
- ?7 B4 g6 h: M$ v; Q& d# evar arrlookup = new array();& _6 r2 j4 I1 W) g  W2 `
var i;
6 K0 @) |" F1 K5 {/ cfor (i = 0; i < tbox.options.length; i++) {
5 b. A# f/ B4 s! @8 Y9 V& k. Earrlookup[tbox.options.text] = tbox.options.value;
6 z7 q; y8 f5 R' farrtbox = tbox.options.text;
& ]6 z2 X5 k0 V( p& Z  H}3 m. l6 M) U) H* l# I" x5 o
var flength = 0;
9 d4 @: e+ ?/ F0 \var tlength = arrtbox.length;$ a: W4 @0 `' `. h$ h8 j- I
for(i = 0; i < fbox.options.length; i++) {# r2 z+ W( _" ~( M/ d1 W
arrlookup[fbox.options.text] = fbox.options.value;
( U% c4 f5 N, oif (fbox.options.selected && fbox.options.value != "") {
+ M8 A% C  G- v0 l$ t$ jarrtbox[tlength] = fbox.options.text;, ?0 z( R5 E5 U# h: T
tlength++;
& I+ o$ p1 l9 P0 r2 A; O: t9 _}& r# n  o2 a$ H4 }
else {
$ f$ ?: o# w& i0 e! oarrfbox[flength] = fbox.options.text;* R* |. A; B: x2 o
flength++;; k5 p9 g+ T/ y1 v3 ~+ f$ p1 P
   }
! ~0 E) c+ n3 X- t* r}
: J% `+ c% {) H% I9 W2 earrfbox.sort();3 E2 x! {  O- ?% J2 D9 p2 n0 z" }. ^/ B
arrtbox.sort();
" b4 B0 e3 l4 l% ?% h/ k* i
/ u/ ], D) T# s6 u. q. t: J# ifbox.length = 0;
- h% ~5 k+ u$ W( c; L0 rtbox.length = 0;4 E& W' ~/ e  ?; |% r
var c;
8 w6 x" k; b8 B$ q9 ^& ffor(c = 0; c < arrfbox.length; c++) {
5 L& {) A0 H2 s. N6 \" A4 a6 xvar no = new option();
- e9 q$ Z+ v5 d8 Ino.value = arrlookup[arrfbox[c]];
; b# z, O: C, _. I/ M' G2 yno.text = arrfbox[c];$ u0 D5 t7 I) N9 t8 ]
fbox[c] = no;
3 A" o) l" u% ~  ~* T}& g9 \8 P" Z9 g1 U" e" g* A
for(c = 0; c < arrtbox.length; c++) {0 e- i  o+ E" z! N1 B9 X- b: W7 K
var no = new option();$ }5 x' k/ n# @5 K$ V. I
no.value = arrlookup[arrtbox[c]];
& |5 J+ C8 h/ v) l: ~no.text = arrtbox[c];
; A- }; `3 Q' A. W  V1 jtbox[c] = no;& {6 ]2 V4 z! y4 P+ T# h
   }/ F/ l) v% s) Q" a# z5 b
}
: V9 ~5 i2 F" ~- W& u/ o</script>
7 c5 _" N6 P! K( A9 x3 P/ o; {</body>
) ?8 e0 ^) R, H6 x





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