ssh+dwr实现级联操作

前端之家收集整理的这篇文章主要介绍了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) {
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岁的生日,就想写一篇博客送给自己当做礼物。今年也是我学校生涯的最后一年(今年六月毕业).弱弱的说一句,我博客写完了才发现有源代码这个样式,蛋疼!,先这样,下次博客肯定比这次好看。

原文链接:https://www.f2er.com/ajax/164988.html

猜你在找的Ajax相关文章