SSH+DWR 省市县三级关联

最近做项目用到这个东西,网上找了很多资料都不是很全面或者是不太好理解(主要是设计到hibernate的一部分),小弟在前人的基础上跟进一下,贴出来分享分享.

//

 

数据库设计:

 

RowID   Proince  City  District

 

 ///

 DWR.XML

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
  <allow>  
  <create javascript="province" creator="spring" scope="session">
  <param name="beanName" value="KcGeoDAO"></param>
  </create>
  <convert converter="bean" match="com.XXX.hibernate.pojo.KcGeo" ></convert>
  </allow>
</dwr>

 

 

///

 

ProDAO.Java

 

 

public Map getPro(){
  Map map = new HashMap();
  String query ="from KcGeo ";
  List list = getHibernateTemplate().find(query);
  for(Object obj:list){
  KcGeo geo=(KcGeo) obj;
  map.put(geo.getProvince(), geo.getProvince());
  }
  return map;
 }

 

 

  public Map getCity(String province){
  Map map=new HashMap();
  String query="from KcGeo where province= '"+province+"' ";
  List list=this.getHibernateTemplate().find(query);
  for(Object obj:list){
  KcGeo p=(KcGeo) obj;
  map.put(p.getCity(), p.getCity());
  }
  return map;
  }
  public Map getDistrict(String city){
  Map map=new HashMap();
  String query="from KcGeo where city='"+city+"' ";
  List list=this.getHibernateTemplate().find(query);
  for(Object obj:list){
  KcGeo p=(KcGeo) obj;
  map.put(p.getDistrict(), p.getDistrict());
  }
  return map;
  }

 

 

 

Pro.js

 

//获得省
  function getPro(){
  var obj_Pro = document.getElementById("sel_Pro");
  //调用dao的方法
  province.getPro(proReturn);
  }
  //回调函数
  function proReturn(data){
  var obj_Pro=document.getElementById("sel_Pro");
  DWRUtil.removeAllOptions(obj_Pro);
  DWRUtil.addOptions(obj_Pro,{
  '':'请选择'
  });
  DWRUtil.addOptions(obj_Pro,data);
  }
  //根据省获得市
  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.getCity(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.getDistrict(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);
  }

 

 

///

 

index.jsp

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>省市县三级联动</title>
  <script type="text/javascript" src="/XXX/dwr/interface/province.js"></script>
  <script type="text/javascript" src="/X XX/dwr/engine.js"></script>
  <script type="text/javascript" src="/XXX/dwr/util.js"></script>

  <script type="text/javascript" src="/XXX/js/pro.js"></script>
</head>
  <body οnlοad="getPro()">
<table>
  <tr><h3>省市县三级联动</h3></tr>
  <tr>
  <td>省:</td>
  <td><select id="sel_Pro" οnchange="getCity()" >
  <option value="">请选择</option>
  </select>
  </td>
  <td>
  <td>市:</td>
  <td>
  <select id="sel_City" οnchange="getCounty()">
  <option value="">请选择</option>
  </select>
  </td>
  <td>县:</td>
  <td>
  <select id="sel_County">
  <option value="">请选择</option>
  </select>
  </td>
  </tr>
  </table>
</body>
</html>

 OK,大功告成!2009-12-29

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值