ssh+dwr实现级联操作

今天做了一个级联操作，捣鼓了一天，整出的效果图如下：

 

 

其步骤大致分为以下几步：

1.创建实体类，这里我将数据库贴出来，具体代码不在详述：

 

2.下载dwr 的jar包，这里以dwr2.0为例。放到WebRoot的lib目录下，接着配置web.xml文件，示例如下：

<!-- 配置DWR前端控制器 -->
    <servlet>
        <servlet-name>dwrServlet</servlet-name>
        <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
        <!-- 指定配置文件 -->
        <init-param>
            <param-name>config</param-name>
            <param-value>
                /WEB-INF/dwr.xml                
            </param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>dwrServlet</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>


 

这个完成后，新建dwe.xml文件,配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>

  <allow>
       <!--dwr操作的service层， 直接到容器里拿 -->
	<create creator="spring" javascript="dwrInvokeDataAction">
		<param name="beanName" value="menuService"/>
	</create>
	<convert converter="bean" match="cn.com.car.model.*"/>
  </allow>

</dwr>

这里需要注意的是menuService对应的是代码里的menuService类，dwrInvokeDataAction则是你jsp里将要引用的js,通过这个js去调用menuService类里的方法。 3.建立menuService类方法，我这里是抽象类加实现类即menuService是接口，实现方法在menuServiceImpl类里面（这里很蛋疼，之前我dwr操作的是action层，action调用的是service层实现的，但是理想很丰满，现实很骨感，因为我dwr集成了三大框架，当前台到用到action层方法时，service对象为空，无法调用service里的方法，现在只好把action去掉，直接调用service层）。

<span style="font-family:SimHei;font-size:14px;color:#000000;">menuService里的方法如下：</span>

//通过页面的onchange事件重写下拉列表

<p>public String findInitString(String privince, String code) {
  Session s=HibernateUtil.getSession();
  String hql = " from PrplArea prpdpropertyarea where prpdpropertyarea.superAreaCode = '"+privince+"' and prpdpropertyarea.validStatus = '1' ";
  Query query=s.createQuery(hql);
  List<PrplArea> prpdpropertyareaList = query.list();
  StringBuffer sb = new StringBuffer();
  if("privince".equals(code)){
   sb.append("<select name=\"prpLregist.cityCode\" id=\"city\"  οnchange=\"setStyle('city',this);\">");
  }else if("city".equals(code)){
   sb.append("<select name=\"prpLregist.regionalCode\" id=\"area\"  >"); 
  }
  sb.append("<option value=''>请选择</option>");
  for (PrplArea prpdpropertyarea : prpdpropertyareaList) {
   sb.append("<option value='");
   sb.append(prpdpropertyarea.getAreaCode());
   sb.append("'>");
   sb.append(prpdpropertyarea.getAreaCName());
   sb.append("</option>");
  } 
  sb.append("</select>"); 
  sb.append("<span class=\"required\">*</span>");
  if("privince".equals(code)){
   sb.append("-|-");
   sb.append("<select name=\"prpLregist.regionalCode\" id=\"area\" >");
   sb.append("<option value=''>请选择</option>");
   sb.append("</select>");
  }
  return sb.toString();
 
 }
 /** 通过省得到市String*/
 public String findCityString(String privince){
  return this.findInitString(privince,"privince");
 }
 
 /** 通过市得到区String*/
 public String findAreaString(String city){
  return this.findInitString(city,"city");
 }</p><p> /**
  * 当进来该页面时首先调用该方法，初始化页面省份，然后省份下拉列表就有值了，然后根据省份下拉列表所选的值，通过onchange事件传到后台，去查询市。
  */
 public Map<String, String> findPrivinceMap() {
  Session s=HibernateUtil.getSession();
  Map<String,String> privinceMap = new LinkedHashMap<String,String>(0);
  String hql = "from PrplArea as  prplArea where prplArea.superAreaCode = '0000' and prplArea.validStatus='1' order by areaCode";
  Query query=s.createQuery(hql);
  List<PrplArea> PrpdpropertyareaList = query.list();
  for (PrplArea prpdpropertyareaPrivince : PrpdpropertyareaList) {
   privinceMap.put(prpdpropertyareaPrivince.getAreaCode(), prpdpropertyareaPrivince.getAreaCName());
  }
  return privinceMap;
 }</p>

<span style="font-family:SimHei;font-size:14px;color:#000000;">4.menuService里的方法准备好后，咱现在先看进入该页面的初始化方法，action里是这样调用的：</span>

   private MenuService menuService;//这是咱刚写的service层
   private Map<String,String> privinceMap = new LinkedHashMap<String,String>(0);//省份
   private Map<String,String> cityMap = new LinkedHashMap<String,String>(0);//市级
   private Map<String,String> areaMap = new LinkedHashMap<String,String>(0);//县级或区
   public String initRegist(){

   privinceMap = menuService.findPrivinceMap();//调用service层里的方法，先把省份查出来，市和区暂时没值
   cityMap = new LinkedHashMap<String,String>(0);
   areaMap = new LinkedHashMap<String,String>(0);
   return SUCCESS;
 }

5、action准备完成后，咱一起进入最后一关jsp页面，我先把代码贴出来，后面一起慢慢研究：

jsp代码如下：

<table class="tab_1">
     <tr id="damagePrivinceTr" >
   <td align="right">
    出险所在省
   </td>
   <td align="left">
    <s:select name="prpLregist.provinceCode" id="privince"
     list="privinceMap" headerKey="" headerValue="请选择"
      οnchange="setStyle('privince',this);" theme="simple"></s:select>
   </td>
   <td >
    出险所在市
   </td>
   <td id="cityTD1">
    <s:select name="prpLregist.cityCode" id="city" list="cityMap"
      headerKey="" headerValue="请选择"
     οnchange="setStyle('city',this);" theme="simple"></s:select>
   </td>
   <td class="bgc_tt short">
    出险所在区
   </td>
   <td class="long" id="areaTD1">
    <s:select name="prpLregist.regionalCode" id="area" list="areaMap"
      headerKey="" headerValue="请选择" theme="simple"></s:select>
   </td>
  </tr>

</table>

js代码如下：

<p><script type="text/javascript"></p><p>function setStyle(field,obj){
   getMap(field,obj);
  }
 function getMap(field,obj){
   var outputObject;
   var inputObject = obj.value;
//如果是省份，则查询结果会返回市和区，通过"-|-"隔离开来，下面回调函数会将其分开
   if(field == 'privince'){
    dwrInvokeDataAction.findCityString(obj.value,rollbackgetCityMap);
   }else if(field == 'city'){
    dwrInvokeDataAction.findAreaString(obj.value,rollbackgetAreaMap);
   }
  return true;
  }</p><p> function rollbackgetCityMap(returnObject){//回调函数
   var array = returnObject.split('-|-');
   if(array.length>1){
    document.getElementById("areaTD1").innerHTML = array[1];
   }
   document.getElementById("cityTD1").innerHTML = array[0];
  }</p><p> function rollbackgetAreaMap(returnObject){
   document.getElementById("areaTD1").innerHTML = returnObject;
  }
  </script></p>

最后引用js(注意顺序)：

   <script type='text/javascript' src='/claim_biyesheji/dwr/interface/dwrInvokeDataAction.js'></script>
   <script type='text/javascript' src='dwr/engine.js'></script>
   <script type='text/javascript' src='dwr/util.js'></script>

来个小结，为了不耽误大家的时间，此处可以略过，这里纯属个人感想：

今天是我第一次写博客，也是我22岁的生日，就想写一篇博客送给自己当做礼物。今年也是我学校生涯的最后一年（今年六月毕业）.弱弱的说一句，我博客写完了才发现有源代码这个样式，蛋疼！，先这样，下次博客肯定比这次好看。