DWR实现省市县三级联动 - zl芊芊zl的博客

作者在 2007-07-24 19:20:00 发布以下内容

引自：http://fuhao9611.javaeye.com/blog/99865

本例子是由MySQL数据库，结合前台使用Struts来完成的。主要是为了说明DWR的使用，所以对于数据库的设计等等都较简单，大家觉得那里有什么不合理之处请给我留言！数据库创建的脚本在附件里面。
数据库的大概设计是，共有三个字段[id,name,parentid]，顾名思义，id就是唯一标示一条记录，name存放的是省市县的名称，parentid存放的其上级的id，例如对于省一级别的，其parentid全部为0，对于市一级别的，其parentid存放的是所对应省的id，对于县一级别的，其parentid存放的是所对应市的id。
首先在进入显示页面的时候就把所有的parentid=0的全部查出来，初始化进入省所在的下拉列表中，然后根据选择省的下拉列表，通过DWR调用java方法将其所对应的市取出来，以此类推……
这里主要需要说明的是在web.xml里面需要配置如下：

代码

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

然后在web.xml的同目录下，创建一个

技术文章 | 阅读 2019 次

文章评论，共2条

zl芊芊zl(作者)

2007-07-24 19:28

OK，至此我们需要测试一下，看看配置的DWR是否正确，启动Tomcat，通过访问http://localhost:8080/Struts_Dwr/dwr，此时会出现如下图所示的页面：
[IMG]http://fuhao9611.javaeye.com/upload/picture/pic/4268/db14aaaa-ddb1-49a6-9da8-483b957c8e01.jpg[/IMG]
[IMG]http://fuhao9611.javaeye.com/upload/picture/pic/4269/4c28843e-0572-44de-9edc-7c8bfa6e8a37.jpg[/IMG]
点击getChild("1")后面的Execute方法，如果弹出如下所示的弹出框：
[IMG]http://fuhao9611.javaeye.com/upload/picture/pic/4270/6f0a2682-5eb2-4cd2-b2d8-f42d809d2284.jpg[/IMG]
则说明DWR配置完全正确，可以继续写jsp页面了！曙光就在眼前！呵呵~~~

赞回复

zl芊芊zl(作者)

2007-07-24 19:29

前台的jsp页面index.jsp代码如下：

代码
<%@ page language="java" pageEncoding="GB2312"%>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省市县三级联动</title>
    <script type="text/javascript" src="dwr/interface/province.js"></script>
    <script type="text/javascript" src="dwr/engine.js"></script>
    <script type="text/javascript" src="dwr/util.js"></script>
    <script language="javascript">
    // 根据选择的省,获得其所辖的市
        function getCity(){
            var obj_Pro = document.getElementById("sel_Pro");
            var obj_City = document.getElementById("sel_City");
            var obj_County = document.getElementById("sel_County");
            var pro_Index = obj_Pro.selectedIndex;
            var pro_Value = obj_Pro.options[pro_Index].value;
            if(pro_Value != "" && pro_Value != null){
                province.getChild(pro_Value,cityReturn);
            }else{
                DWRUtil.removeAllOptions(obj_City);
                DWRUtil.addOptions(obj_City,{'':'请选择'});
                DWRUtil.removeAllOptions(obj_County);
                DWRUtil.addOptions(obj_County,{'':'请选择'});
            }
        }
    // 回调函数
        function cityReturn(data){
            var obj_City = document.getElementById("sel_City");
            DWRUtil.removeAllOptions(obj_City);
            DWRUtil.addOptions(obj_City,{'':'请选择'});
            DWRUtil.addOptions(obj_City,data);
        }
    // 根据选择的市,获得所辖的县
        function getCounty(){
            var obj_Pro = document.getElementById("sel_Pro");
            var obj_City = document.getElementById("sel_City");
            var obj_County = document.getElementById("sel_County");
            var city_Index = obj_City.selectedIndex;
            var city_Value = obj_City.options[city_Index].value;
            if(city_Value != "" && city_Value != null){
                province.getChild(city_Value,countyReturn);
            }else{
                DWRUtil.removeAllOptions(obj_County);
                DWRUtil.addOptions(obj_County,{'':'请选择'});
            }
        }
    // 回调函数
        function countyReturn(data){
            var obj_County = document.getElementById("sel_County");
            DWRUtil.removeAllOptions(obj_County);
            DWRUtil.addOptions(obj_County,{'':'请选择'});
            DWRUtil.addOptions(obj_County,data);
        }
    </script>
  </head>
  <body>
  <br /><br />
  <div align="center"><font color="red">省市县三级联动</font></div>
  <br />
   <table align="center">
     <tbody>
        <tr>
            <td>省:</td>
            <td>
                <select id="sel_Pro" onchange="getCity()">
                    <option value="">请选择</option>
                    <c:forEach items="${map}" var="hashMap">
                        <option value="<c:out value='${hashMap.key}' />"><c:out value="${hashMap.value}" /></option>
                    </c:forEach>
                </select>
            </td>
            <td>市:</td>
            <td>
                <select id="sel_City" onchange="getCounty()">
                    <option value="">请选择</option>
                </select>
            </td>
            <td>县:</td>
            <td>
                <select id="sel_County">
                    <option value="">请选择</option>
                </select>
            </td>
        </tr>
     </tbody>
   </table>
  </body>
</html>

对于index.jsp需要说明的是：需要引用三个js，province.js[其与dwr.xml里面的javascript的名称相同]，engine.js，util.js。其中对于province.js是由dwr自动生成的javascript文件，包括相应的类以及方法。dwr/engine.js是dwr的核心引擎脚本处理客户端调用的转换，dwr/util.js包含了工具函数简化页面处理。
至此编码完毕

赞回复