用dwr做级联下拉表单

最新推荐文章于 2016-03-11 09:05:15 发布

iteye_18969

最新推荐文章于 2016-03-11 09:05:15 发布

阅读量236

点赞数

分类专栏： java 基础文章标签： DWR Servlet JavaScript Spring Struts ViewUI

java 基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

级联下拉表单的做法有很多种，如jquery ajax，dwr等。

现在我介绍下用dwr的做法。

实现目标：

两级地域下拉表单

A B

A中有三个选项：全部，北京，上海

当A选全部时，B中出现全部

当A选北京时，B中出现全部，朝阳区，海淀区

当A选上海时，B中出现全部，浦东区，普坨区

1、下载dwr-2.0.rc1.jar，放入WEB-INIF/lib，附件中有。

2、在web.xml中加入

<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>crossDomainSessionSecurity</param-name>
			<param-value>false</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>

我加在struts的filter之后

3、新建Area类，地域对象

package com.my.dwr;

/**
 * 
 * @author 锅巴
 * @date 2011-3-6
 * @description
 */
public class Area {

	private String name;
	
	private int code;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getCode() {
		return code;
	}

	public void setCode(int code) {
		this.code = code;
	}
	
	
}

4、新建AreaService对象，业务对象

package com.my.dwr;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 
 * @author 锅巴
 * @date 2011-3-6
 * @description
 */
public class AreaService {

	private Map<Integer,List<Area>> areaMap = null;
	

	
	private List<Area> parentAreas = null;
	
	public AreaService(){
		
		areaMap = new HashMap<Integer, List<Area>>();
		parentAreas = new ArrayList<Area>();
		
		Area area = new Area();
		area.setCode(-1);
		area.setName("全部");
		
		Area area0 = new Area();
		area0.setCode(1);
		area0.setName("北京");
		
		Area area1 = new Area();
		area1.setCode(2);
		area1.setName("上海");
		
		Area area0_0 = new Area();
		area0_0.setCode(-1);
		area0_0.setName("全部");
		
		Area area0_1 = new Area();
		area0_1.setCode(3);
		area0_1.setName("朝阳区");
		
		Area area0_2 = new Area();
		area0_2.setCode(4);
		area0_2.setName("海淀区");
		
		Area area1_0 = new Area();
		area1_0.setCode(-1);
		area1_0.setName("全部");
		
		Area area1_1 = new Area();
		area1_1.setCode(5);
		area1_1.setName("浦东区");
		
		Area area1_2 = new Area();
		area1_2.setCode(6);
		area1_2.setName("普坨区");
		
		parentAreas.add(area);
		parentAreas.add(area0);
		parentAreas.add(area1);
		
		
		List<Area> areas = new ArrayList<Area>();
		areas.add(area);
		
		areaMap.put(-1, areas);
		
		
		List<Area> area0s = new ArrayList<Area>();
		area0s.add(area0_0);
		area0s.add(area0_1);
		area0s.add(area0_2);
		areaMap.put(1, area0s);
		
		List<Area> area1s = new ArrayList<Area>();
		area1s.add(area1_0);
		area1s.add(area1_1);
		area1s.add(area1_2);
		areaMap.put(2, area1s);
		
		
	}
	
	

	
	public List<Area> getAreasByParentId(int areaId){
		return areaMap.get(areaId);
	}
	
	public List<Area> getParentAreas(){
		return parentAreas;
	}
	
}

5、在WEB-INF/中新建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>
		<!-- 从spring ioc 中获取 -->
		<create creator="spring" javascript="JAreaSelect">
			
			<param name="beanName" value="areaService" />

			 <!-- 可以指定暴露的方法
			 <include method="Register" />
			  -->
			 
		</create>
		
		<!--  直接生成一个实例
		<create creator="new" javascript="JAreaSelect">
			<param name="class" value="com.my.dwr.AreaService" />
		</create>
		-->
		
		<!-- 将area转成json -->
		<convert converter="bean" match="com.my.dwr.Area">
			<!-- 
			可以指定要输出的属性
			<param name="include" value="storeId,fullName,city,address,phoneURL,photoURL,DetailURL,posx,posy,discount,discountnotes"/>
			 -->
		</convert>
	</allow>
</dwr>

6、新建dwr.jsp页面，

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isErrorPage="true"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="parentArea" οnchange="changeParentArea();return false;">
	<s:iterator value="parentAreas">
		<option value="<s:property value='code'/>"><s:property
			value="name" /></option>
	</s:iterator>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
<select id="childArea">
	<option value="-1">全部</option>
</select>
<script language=javascript>
	function changeParentArea() {
		var the_index = $("parentArea").selectedIndex;
		var the_selected = $("parentArea").options[the_index];
		JAreaSelect.getAreasByParentId(the_selected.value,
				changeParentAreaCallback);
	}

	function changeParentAreaCallback(childs) {
		var selectName = document.getElementById("childArea");
		selectName.options.length = 0;

		for ( var j = 0; j < childs.length; j++) {
			area = childs[j];
			selectName.options[j] = new Option(area.name, area.code);
		}
	}
</script>
<!-- dwr 引入的 文件 -->
<script type='text/javascript' src='/dwr/interface/JAreaSelect.js'></script>
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type="text/javascript" src="/dwr/util.js">
	
</script>
</body>
</html>

7、建一个action导向该jsp，url为：/common/dwr.html

package com.my.action;

import java.util.List;

import com.my.dwr.Area;
import com.my.dwr.AreaService;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 
 * @author 锅巴
 * @date 2011-3-6
 * @description
 */
public class Dwr extends ActionSupport{
	
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private AreaService areaService;

	private List<Area> parentAreas;
	
	@Override
	public String execute() throws Exception {
		// TODO Auto-generated method stub
		
		parentAreas = areaService.getParentAreas();
		
		return SUCCESS;
	}

	
	
	
	public List<Area> getParentAreas() {
		return parentAreas;
	}





	public void setAreaService(AreaService areaService) {
		this.areaService = areaService;
	}
	
	
	

}

可以访问/common/dwr.html了，试试下拉的效果