JSP、Java实现选择框多级连动

分类: Jsp   出处:iocblog整理  更新时间:2009-07-24   添加到收藏  
 

    环境:
    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> ";
                    } else {
                        optionhtml = optionhtml + "<option value="" + code + "" tourl=" + linked + ">" + code + "-" + name + "</option> ";
                    }
                }
            } catch (sqlexception e) {
                system.out.println(e.getmessage());
                e.printstacktrace();
            }
            return optionhtml;
        }

[1] [2] 下一页



文章整理:iocblog
版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。