作者:熔岩
日期:2007-03-08
MSN :
[email]leizhimin@126.com[/email]
声明:原创作品,未经授权,谢绝转载!
 
JSP、Java实现选择框多级连动
 
环境:
DB2 9.1
J2SDK 1.5
Servlet 2.4
 
 
一、问题
        在web开发中,经常会遇到两级三级甚至更多级的选项框连动的情况,一般情况下都考虑用js来实现,但是在有大量等级选项的情况下,js实现也很麻烦,并且页面反应很慢,抛弃了js,我们还能用什么来做呢?
        这是我在实际项目中遇到的一个问题,为了在有大量数据请况下不至于慢的无法接受,我打算用JSP/java来实现这个需求。下面我给出我做测试用的例子,以探求其可行性,是两级连动的,有数据回填功能。
        作为测试,业务很简单,第一个选择况是省,第二个显示省里的市,省市分别存储在数据库中的两个表province、city(实际项目中一般都用一个表)。另外还有个静态选择框和文本况,目的是演示数据回填功能。
        所谓的数据回填就是自动为客户回复填过的选项,比如你填写一个注册单,填写有错误,又返回了,在返回的时候,要把所有正确的填写项恢复回来,不必用户再从头填写。(这个回填功能用struts很容易实现,但是我面对现实是不用struts、hibernate,呵呵,因为没有复杂业务处理,主要是报表页面)。
 
        下面是省市两个建表SQL的(DB2脚本)
drop table province;
create table province(
code varchar(10),
name varchar(10));
 
insert into province (code,name) values('1','河南'),
('2','陕西'),
('3','河北');
 
drop table city;
create table city(
code varchar(10),
name varchar(10));
 
insert into city (code,name) values('1','郑州'),
('1','洛阳'),
('1','许昌'),
('1','焦作'),
('1','开封'),
('2','西安'),
('2','咸阳'),
('2','宝鸡'),
('3','石家庄'),
('3','唐山');
 
二、实现方法
 
1、两级连动
        在省选择框中读取所有省,当选项改变的时候触发一个js事件(onchange),将选择的省份代码和发送给自身页面,进一步显示该省下的城市选择框。
 
2、回填
        对于文本框回填,则将请求参数记录下来。
        对于静态选择框,将选择项记录下来,在再次进入页面时候利用查询,设置checked属性。
        对于动态文本框,有专门的后台方法来实现。
 
三、实现代码
 
实现很简单,就两个文件,一个后台工具类,一个页面就搞定了。
 
1、后台工具类
package test;
import javax.naming.InitialContext;
import javax.naming.Context;
import javax.sql.DataSource;
import java.sql.*;
/**
 * File Name:   TestDBUitl.java
 * Created by:  IntelliJ IDEA.
 * Copyright:   Copyright (c) 2003-2006
 * Date Time:   2007-3-6 14:05:42
 * Readme:      JSP实现多级选择框连动测试,后台工具类
 */
 
/**
 * 数据库工具类
 */

public final class TestDBUitl {
    /**
     * 通过数据源获取一个JDBC链接(如果没有配置数据源,可以将此完全方法注释掉,下面直接用JDBC的方式获取数据库连接)
     *
     * @return 一个JDBC链接
     */

    public static Connection getConnectionByJNDI() {
        try {
            //建立数据库连接
            Context ctx = new InitialContext();
            DataSource ds = (DataSource) ctx.lookup("java:comp/env/jdbc/zfvds"); //tomcat数据源
            //DataSource ds = (DataSource) ctx.lookup("zfvds");    //Weblogic或者WebSphere数据源
            return ds.getConnection();
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
 
    /**
     * 直接获取JDBC链接
     *
     * @return 一个JDBC链接(测试用,方便)
     */

    public static Connection getConnectionByJDBC() {
        Connection conn = null;
        try {
            //装载驱动类
            Class.forName("com.ibm.db2.jcc.DB2Driver");
        } catch (ClassNotFoundException e) {
            System.out.println("装载驱动异常!");
            e.printStackTrace();
        }
        try {
            //建立JDBC连接
            conn = DriverManager.getConnection("jdbc:db2://192.168.3.8:50000/zfvims", "zfvims", "zfvimsdb2");
        } catch (SQLException e) {
            System.out.println("链接数据库异常!");
            e.printStackTrace();
        }
        return conn;
    }
 
    /**
     * 获取省份选项的html代码串
     * @param sect 要选择的省份
     * @param topage 要转向的页面
     * @return 省份选项的html代码串
     */

    public static String getProvinceOptions(String sect, String topage) {
        String optionHTML = "";
        Connection conn = getConnectionByJDBC();
        Statement stmt;
        ResultSet rs;
        String sqlx = "select t.code,t.name from province t order by t.code asc";
        try {
            //创建一个JDBC声明
            stmt = conn.createStatement(ResultSet.TYPE_FORWARD_ONLY, ResultSet.CONCUR_READ_ONLY);
            //执行查询
            rs = stmt.executeQuery(sqlx);
            while (rs.next()) {
                String code = rs.getString("code");
                String name = rs.getString("name");
                String linked = "\"" + topage + "?province=" + code + "\"";
                if (sect.equals(code)) {
                    optionHTML = optionHTML + "<option value=\"" + code + "\"" + "\" tourl=" + linked + " selected>" + code + "-" + name + "</option>\n\t\t";
                } else {
                    optionHTML = optionHTML + "<option value=\"" + code + "\" tourl=" + linked + ">" + code + "-" + name + "</option>\n\t\t";
                }
            }
        } catch (SQLException e) {
            System.out.println(e.getMessage());
            e.printStackTrace();
        }
        return optionHTML;
    }
    /**
     * 获取一个省份下城市选项的html代码串
     * @param pcode 省份
     * @param sect 默认选中的城市代码
     * @return 城市选项的html代码串
     */

    public static String getCityOptions(String pcode, String sect) {
        String optionHTML = "";
        Connection conn = getConnectionByJDBC();
        ResultSet rs;
        String sqlx = "select t.code,t.name from city t where t.code = ? order by t.code asc";
        try {
            //开始一个事务(注意关闭事务)
            conn.setAutoCommit(false);
            //创建一个JDBC声明
            PreparedStatement pstmt = conn.prepareStatement(sqlx, ResultSet.TYPE_FORWARD_ONLY, ResultSet.CONCUR_READ_ONLY, ResultSet.CLOSE_CURSORS_AT_COMMIT);
            //设置预定义参数
            pstmt.setString(1, pcode);
            rs = pstmt.executeQuery();
            while (rs.next()) {
                String code = rs.getString("code");
                String name = rs.getString("name");
                if (sect.equals(code)) {
                    optionHTML = optionHTML + "<option value=\"" + code + "\"" + " selected>" + code + "-" + name + "</option>\n\t\t";
                } else {
                    optionHTML = optionHTML + "<option value=\"" + code + "\">" + code + "-" + name + "</option>\n\t\t";
                }
            }
            //提交事务
            conn.commit();
            //关闭连接等资源(注意先后顺序)
            rs.close();
            pstmt.close();
            conn.close();
        } catch (SQLException e) {
            System.out.println(e.getMessage());
            e.printStackTrace();
        } finally {
            //预防性关闭连接(避免异常发生时在try语句块关闭连接没有执行)
            try {
                if (conn != null) conn.close();
            } catch (SQLException e) {
                System.out.println(e.getMessage());
                e.printStackTrace();
            }
        }
        return optionHTML;
    }
}
 
2、测试用的页面
<%--
  File Name:    TestCheckBoxLinks.jsp
  Created by:   IntelliJ IDEA.
  Copyright:    Copyright (c) 2003-2006
  Date:         2007-3-6 15:14:33
  Readme:       JSP、Java实现选择框连动,实现页面输入信息回填功能。
--%>

<%@ page contentType="text/html; charset=GBK" %>
<%@ page import="test.TestDBUitl" %>
<%
    String rootPath = request.getContextPath();
    String topage = rootPath + "/pages/test/TestCheckBoxLinks.jsp";
    String province = request.getParameter("province");
    String city = request.getParameter("city");
    String stype = request.getParameter("stype");
    String author = request.getParameter("author");
 
    if (province == null || "null".equals(province)) province = "";
    if (city == null || "null".equals(city)) city = "";
    if (stype == null || "null".equals(stype)) stype = "";
    if (author == null || "null".equals(author)) author = "熔  岩";
%>
<html>
<head>
    <title>JSP、Java实现选择框连动,实现页面输入信息回填功能。</title>
</head>
<body>
<form method="post">
    <table>
        <tr>
            <td>省 份:</td>
            <td>
                <select name="province" onchange="getallpames(this)">
                    <option value="" tourl="/zfvims/pages/test/TestCheckBoxLinks.jsp">不限制</option>
                    <%=TestDBUitl.getProvinceOptions(province, topage)%>
                </select>
            </td>
            <td>城 市:</td>
            <td>
                <select name="city">
                    <option value="">不限制</option>
                    <%=TestDBUitl.getCityOptions(province, city)%>
                </select>
            </td>
        </tr>
        <tr>
            <td>类 型:</td>
            <td>
                <select name="stype">
                    <option value="04">A</option>
                    <option value="07">B</option>
                    <option value="11">C</option>
                    <option value="13">D</option>
                </select>
            </td>
            <script language="javascript">
                var a = document.all.stype.options;
                var n = a.length;
                for (var i = 0; i < n; i++) {
                    var b = document.all.stype.options[i].value;
                    if (b == "<%=stype%>") {
                        document.all.stype.options[i].selected = true;
                    }
                }
            </script>
            <td>作 者:</td>
            <td>
                <input type="text" name="author" value="<%=author%>" maxlength="20">
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td colspan="2"></td>
            <td><input type="button" name="CX" value="查询"></td>
            <td><input type="reset" value="重置"></td>
            <td colspan="2"></td>
        </tr>
    </table>
</form>
</body>
</html>
<script type="text/javascript">
    function getallpames(obj) {
        var pames = "&province=" + document.all.province.value;
        pames += "&city=" + document.all.city.value;
        pames += "&stype=" + document.all.stype.value;
        pames += "&author=" + document.all.author.value;
        var tourl = obj.options[obj.selectedIndex].tourl + pames;
        //alert(tourl);  //打印转向地址的开关
        window.location = tourl;
    }
</script>
 
三、效果图预览
 
 
 
 
 
 
 
四、评价
          这中做法适合有大量数据的情况下,即使数据很多,也不会很慢,但也在少量数据的情况下,速度和用户体验度上都不及JS的实现。现在的AJAX技术是个更好的选择,只是我还不会,呵呵。
这个例子在实际项目中应该慎用,因为需要考虑回填,校验等相关问题。
          数据库脚本稍作修改就可以用到其他数据库中,后台方法也一样,主要差别在于注册驱动和驱动url上面。