今天做了一个级联操作,捣鼓了一天,整出的效果图如下:
其步骤大致分为以下几步:
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岁的生日,就想写一篇博客送给自己当做礼物。今年也是我学校生涯的最后一年(今年六月毕业).弱弱的说一句,我博客写完了才发现有源代码这个样式,蛋疼!,先这样,下次博客肯定比这次好看。