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>

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

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

<p>public String findInitString(String privince,String code) {
Sessions=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" onchange="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() {
Sessions=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>(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="请选择"
 onchange="setStyle('privince',this);" theme="simple"></s:select>
</td>
<td >
出险所在市
</td>
<td id="cityTD1">
<s:select name="prpLregist.cityCode" id="city" list="cityMap"
 headerKey="" headerValue="请选择"
onchange="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岁的生日，就想写一篇博客送给自己当做礼物。今年也是我学校生涯的最后一年（今年六月毕业）.弱弱的说一句，我博客写完了才发现有源代码这个样式，蛋疼！，先这样，下次博客肯定比这次好看。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!